Ошибка компиляции Angular 4 AOT при загрузке динамического компонента: компилятор времени выполнения не загружен

Question

Ошибка компиляции Angular 4 AOT при загрузке динамического компонента: компилятор времени выполнения не загружен

Мое приложение Angular имеет дело с загрузкой динамических компонентов. С JIT ng serve or, ng build компиляция, все отлично работает. Даже с AOT ng serve --prod or, ng build --prodЯ все еще могу сделать сборку успешно. Также все ленивые загрузочные модули в приложении работают как положено. Но однажды я initiate an event to load a dynamic component с целевой страницы я получаю следующую ошибку:

vendor.fbd3ddffb0a9e35bbf55.bundle.js:1 ERROR Error: Uncaught (in promise): 
Error: Runtime compiler is not loaded
Error: Runtime compiler is not loaded
at Z (vendor.fbd3ddffb0a9e35bbf55.bundle.js:1)
at t.compileModuleAndAllComponentsAsync 
(vendor.fbd3ddffb0a9e35bbf55.bundle.js:1)
at dynamic.module.3b05550d9afcedd58855.chunk.js:1
at t.invoke (polyfills.a58272fc2ef255219061.bundle.js:1)
at Object.onInvoke (vendor.fbd3ddffb0a9e35bbf55.bundle.js:1)
at t.invoke (polyfills.a58272fc2ef255219061.bundle.js:1)
at r.run (polyfills.a58272fc2ef255219061.bundle.js:1)
at polyfills.a58272fc2ef255219061.bundle.js:1
at t.invokeTask (polyfills.a58272fc2ef255219061.bundle.js:1)
at Object.onInvokeTask (vendor.fbd3ddffb0a9e35bbf55.bundle.js:1)
at Z (vendor.fbd3ddffb0a9e35bbf55.bundle.js:1)
at t.compileModuleAndAllComponentsAsync 
(vendor.fbd3ddffb0a9e35bbf55.bundle.js:1)
at dynamic.module.3b05550d9afcedd58855.chunk.js:1
at t.invoke (polyfills.a58272fc2ef255219061.bundle.js:1)
at Object.onInvoke (vendor.fbd3ddffb0a9e35bbf55.bundle.js:1)
at t.invoke (polyfills.a58272fc2ef255219061.bundle.js:1)
at r.run (polyfills.a58272fc2ef255219061.bundle.js:1)
at polyfills.a58272fc2ef255219061.bundle.js:1
at t.invokeTask (polyfills.a58272fc2ef255219061.bundle.js:1)
at Object.onInvokeTask (vendor.fbd3ddffb0a9e35bbf55.bundle.js:1)
at c (polyfills.a58272fc2ef255219061.bundle.js:1)
at polyfills.a58272fc2ef255219061.bundle.js:1
at t.invokeTask (polyfills.a58272fc2ef255219061.bundle.js:1)
at Object.onInvokeTask (vendor.fbd3ddffb0a9e35bbf55.bundle.js:1)
at t.invokeTask (polyfills.a58272fc2ef255219061.bundle.js:1)
at r.runTask (polyfills.a58272fc2ef255219061.bundle.js:1)
at o (polyfills.a58272fc2ef255219061.bundle.js:1)
at <anonymous>`

Я избавился от вышеуказанной ошибки, применив инжектор в динамическом компоненте следующим образом:

export class DynamicComponent {
private injector: Injector;
private compiler: Compiler;
constructor(injector: Injector) {
    this.injector = ReflectiveInjector.resolveAndCreate(COMPILER_PROVIDERS,
        injector);
    this.compiler = this.injector.get(Compiler);
}
}

Как только вышеуказанная ошибка исчезла, я теперь получаю следующую ошибку:

vendor.fbd3ddffb0a9e35bbf55.bundle.js:1 ERROR Error: Uncaught (in promise): 
Error: No NgModule metadata found for 'l'.
Error: No NgModule metadata found for 'l'.
at t.FDXN.t.resolve (dynamic.module.c493eec4648091b2c9b3.chunk.js:1)
at t.FDXN.t.getNgModuleMetadata (dynamic.module.c493eec4648091b2c9b3.chunk.js:1)
at t.FDXN.t._loadModules (dynamic.module.c493eec4648091b2c9b3.chunk.js:1)
at t.FDXN.t._compileModuleAndAllComponents (dynamic.module.c493eec4648091b2c9b3.chunk.js:1)
at t.FDXN.t.compileModuleAndAllComponentsAsync (dynamic.module.c493eec4648091b2c9b3.chunk.js:1)
at dynamic.module.c493eec4648091b2c9b3.chunk.js:1
at t.invoke (polyfills.a58272fc2ef255219061.bundle.js:1)
at Object.onInvoke (vendor.fbd3ddffb0a9e35bbf55.bundle.js:1)
at t.invoke (polyfills.a58272fc2ef255219061.bundle.js:1)
at r.run (polyfills.a58272fc2ef255219061.bundle.js:1)
at t.FDXN.t.resolve (dynamic.module.c493eec4648091b2c9b3.chunk.js:1)
at t.FDXN.t.getNgModuleMetadata (dynamic.module.c493eec4648091b2c9b3.chunk.js:1)
at t.FDXN.t._loadModules (dynamic.module.c493eec4648091b2c9b3.chunk.js:1)
at t.FDXN.t._compileModuleAndAllComponents (dynamic.module.c493eec4648091b2c9b3.chunk.js:1)
at t.FDXN.t.compileModuleAndAllComponentsAsync (dynamic.module.c493eec4648091b2c9b3.chunk.js:1)
at dynamic.module.c493eec4648091b2c9b3.chunk.js:1
at t.invoke (polyfills.a58272fc2ef255219061.bundle.js:1)
at Object.onInvoke (vendor.fbd3ddffb0a9e35bbf55.bundle.js:1)
at t.invoke (polyfills.a58272fc2ef255219061.bundle.js:1)
at r.run (polyfills.a58272fc2ef255219061.bundle.js:1)
at c (polyfills.a58272fc2ef255219061.bundle.js:1)
at polyfills.a58272fc2ef255219061.bundle.js:1
at t.invokeTask (polyfills.a58272fc2ef255219061.bundle.js:1)
at Object.onInvokeTask (vendor.fbd3ddffb0a9e35bbf55.bundle.js:1)
at t.invokeTask (polyfills.a58272fc2ef255219061.bundle.js:1)
at r.runTask (polyfills.a58272fc2ef255219061.bundle.js:1)
at o (polyfills.a58272fc2ef255219061.bundle.js:1)
at <anonymous>

Я нашел много постов, связанных с этой проблемой, в интернете, в том числе о переполнении стека, но ни одна из них не работает для меня.

Мой динамический компонент выглядит так:

import { Component, Input, Output, ViewContainerRef, Compiler, ComponentFactory, ComponentFactoryResolver, ModuleWithComponentFactories, ComponentRef, ReflectiveInjector, SystemJsNgModuleLoader, OnInit, OnDestroy, ViewChild, Injector } from '@angular/core';
import { Http } from '@angular/http';
import { Observable, Subscription } from 'rxjs/Rx';
import { JitCompiler } from '@angular/compiler';
import { COMPILER_PROVIDERS } from '@angular/compiler';
import * as _ from 'lodash';
import { Page } from './interfaces/page';
import { PageService } from './services/page.service';
import { ActivePageService } from './services/active-page.service';

export class ModuleNode { modulePath: string; componentName: string; }
@Component({
selector: 'app-dynamic-viewer',
host: { 'class': 'template-wrapper dynamicviewer' },
templateUrl: './dynamic.component.html',
styleUrls: ['./dynamic.component.less'],
providers: [PageService, ActivePageService]
})
export class DynamicComponent implements OnInit, OnDestroy {
module: ModuleNode;
componentRef: ComponentRef<any>;
@ViewChild('pageContainer', { read: ViewContainerRef }) public pageHost;
public activePagesData: string[];
public pageData: Page[];
public currentPage: Page;
private injector: Injector;
private compiler: Compiler;

constructor(
    injector: Injector,
    private activePageService: activePageService,
    private pageService: pageService,
    private viewContainerRef: ViewContainerRef,
    private componentFactoryResolver: ComponentFactoryResolver,
    private systemJsNgModuleLoader: SystemJsNgModuleLoader
) {
    this.injector = ReflectiveInjector.resolveAndCreate(COMPILER_PROVIDERS, 
injector);
    this.compiler = this.injector.get(Compiler);
}

ngOnInit() {
    this.getActivePageData();
}

openWebApp(currentModule: any) {
    this.destoryComponent();
    this.systemJsNgModuleLoader.load(currentModule.modulePath)  
        .then((moduleFactory) => {
            this.compiler.compileModuleAndAllComponentsAsync<any>(moduleFactory.moduleType)
                .then((factory: ModuleWithComponentFactories<any>) => {
                    return factory.componentFactories.find(x => x.componentType.name === currentModule.componentName);
                })
                .then(componentFactory => {
                    const moduleRef = moduleFactory.create(this.pageHost.parentInjector);
                    this.componentRef = this.pageHost.createComponent(componentFactory, 0, moduleRef.injector);
                });
        });
}

destoryComponent() {
    if (this.componentRef) {
        this.componentRef.destroy();
    }
}

ngOnDestroy() {
    this.destoryComponent();
}

getPageData() {
    this.pageService.getPageData().subscribe(res => {
        for (const page of res) {
            page.active = (this.activePagesData.indexOf(page.name) !== -1)
        }
        this.pageData = res;

    });
}


getActivePageData() {
    this.activePageService.getActivePageData().subscribe(res => {
        this.activePagesData = res;
        this.getPageData();
    });
}

selectPage(page: Page) {
    if (page.active) {
        this.currentPage = page;
        if (this.componentRef) {
            this.componentRef.destroy();
        }
        this.module = new ModuleNode();
        this.module.modulePath = this.currentPage.modulePath;
        this.module.componentName = this.currentPage.componentName;
        this.openWebApp(this.module);
    }
}
}

Прикладная среда:

@angular/cli: 1.3.0-beta.1
node: 6.9.4
os: win32 x64
@angular version: 4.3.6

Есть ли обходной путь? Любой вклад будет оценен.

1

angular typescript compiler-errors angular-cli aot

Источник

user8323297 07 ноя '17 в 19:20

1 ответ

Решение

Другие вопросы по тегам angular typescript compiler-errors angular-cli aot

user2024077 25 ноя '17 в 08:08 2017-11-25 08:08 · Accepted Answer · 2017-11-25 08:08

Я также прошел через ту же проблему. Вот как я это сделал. Скажем, UserComponent needs to be loaded dynamically с компиляцией AOT с вашей целевой страницы.

user.module.ts

@NgModule({
  ...
  entryComponents: [UserComponent]
})
export class UserModule {
  static entry = UserComponent
}

Ваша основная целевая страница может быть такой:

dynamic.component.htlm

<div>
    <ng-template #pageContainer></ng-template>
</div>    
<div *ngFor="let page of pageData">
    <div (click)="selectPage(page)">
        <div>{{page.title}}</div>
    </div>
</div>

Когда вы выбираете страницу (то есть пытаетесь загрузить компонент динамически) со своей целевой страницы, укажите абсолютный путь к соответствующему модулю. Таким образом, значение currentPage.modulePathдля страницы пользователя может быть что-то вроде app/modules/pages/user/user.module#UserModule, Наконец, вы можете загрузить свой компонент ввода следующим образом:

openWebApp(path: string) {
        this.systemJsNgModuleLoader.load(path)
            .then((moduleFactory: NgModuleFactory<any>) => {
                const entryComponent = (<any>moduleFactory.moduleType).entry;
                const moduleRef = moduleFactory.create(this.injector);    
                const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent);
                this.componentRef = this.pageHost.createComponent(compFactory);
            });
    }

Итак, ваш динамический компонент выглядит так:

dynamic.component.ts

import { Component, Input, Output,   NgModuleFactory, ViewContainerRef, Compiler, ComponentFactory, ComponentFactoryResolver, ModuleWithComponentFactories, ComponentRef, ReflectiveInjector, SystemJsNgModuleLoader, OnInit, OnDestroy, ViewChild, Injector } from '@angular/core';
import { Http } from '@angular/http';
import { Observable, Subscription } from 'rxjs/Rx';    
import { COMPILER_PROVIDERS } from '@angular/compiler';
import * as _ from 'lodash';    
import { Page } from './interfaces/page';
import { PageService } from './services/page.service';
import { ActivePageService } from './services/active-page.service';

@Component({
    selector: 'app-dynamic-viewer',
    host: { 'class': 'template-wrapper dynamicviewer' },
    templateUrl: './dynamic.component.html',
    styleUrls: ['./dynamic.component.less'],
    providers: [PageService, ActivePageService]
})
export class DynamicComponent implements OnInit, OnDestroy {
    componentRef: ComponentRef<any>;
    @ViewChild('pageContainer', { read: ViewContainerRef }) public pageHost;
    public activePagesData: string[];
    public pageData: Page[];
    public currentPage: Page;
    private injector: Injector;
    private compiler: Compiler;

    constructor(
        injector: Injector,
        private activePageService: ActivePageService,
        private pageService: PageService,
        private viewContainerRef: ViewContainerRef,
        private componentFactoryResolver: ComponentFactoryResolver,
        private systemJsNgModuleLoader: SystemJsNgModuleLoader
    ) {
        this.injector = ReflectiveInjector.resolveAndCreate(COMPILER_PROVIDERS, injector);
        this.compiler = this.injector.get(Compiler);
    }

    ngOnInit() {
        this.getActivePageData();
    }

    selectPage(page: Page) {
        if (page.active) {
            this.currentPage = page;
            if (this.componentRef) {
                this.componentRef.destroy();
            }    
            this.openWebApp(this.currentPage.modulePath);
        }
    }

    openWebApp(path: string) {
        this.destoryComponent();
        this.systemJsNgModuleLoader.load(path)
            .then((moduleFactory: NgModuleFactory<any>) => {
                const entryComponent = (<any>moduleFactory.moduleType).entry;
                const moduleRef = moduleFactory.create(this.injector);    
                const compFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(entryComponent);
                this.componentRef = this.pageHost.createComponent(compFactory);
            });
    }

    destoryComponent() {
        if (this.componentRef) {
            this.componentRef.destroy();
        }
    }

    ngOnDestroy() {
        this.destoryComponent();
    }

    getPageData() {
        this.pageService.getPageData().subscribe(res => {
            for (const page of res) {
                page.active = (this.activePagesData.indexOf(page.name) !== -1)
            }    
            this.pageData = res;
        });
    }


    getActivePageData() {
        this.activePageService.getActivePageData().subscribe(res => {
            this.activePagesData = res;
            this.getPageData();
        });
    }
}