Angular 使用网页包代码拆分动态加载组件

为了加载动态组件，我使用Material选项卡，如下所示：

<md-tab-group [selectedIndex]="selectedTabIndex" *ngIf="tabs && tabs.length > 0">
    <md-tab *ngFor="let tab of tabs">
        <template md-tab-label>
            {{tab.title}}
            <span class="k-icon k-i-close mat-tab-close" (click)="close(tab)"></span>
        </template>
        <dcl-wrapper [type]="tab.component"></dcl-wrapper>
    </md-tab>
</md-tab-group>

但我发现“没有找到第2页的组件工厂。您是否将其添加到@NgModule.entryComponents？”错误

我还尝试通过SystemJsNgModuleLoader以这种方式加载单独的模块组件：

this._loader.load('../../dmy/dmy.module#DMYModule').then((factory: NgModuleFactory<any>) => {
    console.log(factory);
});

this._loader.load（'../../dmy/dmy.module#DMYModule'）。然后（（工厂：NgModuleFactory）=>{
控制台日志（工厂）；
});

它给出了以下错误：

错误：找不到模块'../../dmy/dmy.module'。？在WebPackagemptyContext上

因为我使用tab组件而不是路由，所以延迟加载不是我想要的解决方案。因此，我寻找一种方法来获取分离模块组件的实例

您对如何动态加载单独的模块及其组件有何建议？

System.import（“../../dmy/dmy.module.js”）
System.import("../../dmy/dmy.module.js")
            .then((module: any) => {
                return module["DMYModule"];
            }).then((type: any) => {
                return this._compiler.compileModuleAndAllComponentsAsync(type);
            }).then((moduleWithFactories: ModuleWithComponentFactories<any>) => {
                const factory = moduleWithFactories.componentFactories.find((x: any) => x.componentType.name === "Page1"); 
                this.tabs.push({ title: "--", component: factory["componentType"], factory: factory });
                this.selectedTabIndex = this.tabs.length - 1;
                this._cdr.detectChanges();
            });

.然后（（模块：任意）=>{
返回模块[“DMYModule”]；
})。然后（（类型：any）=>{
返回此._compiler.compileModuleAndAllComponentsAsync（类型）；
}).然后（（ModuleWithFactorys:ModuleWithComponentFactorys）=>{
const factory=moduleWithFactorys.componentFactorys.find（（x:any）=>x.componentType.name==“Page1”）；
this.tabs.push（{title:“--”，component:factory[“componentType”]，factory:factory}）；
this.selectedTabIndex=this.tabs.length-1；
此._cdr.detectChanges（）；
});

未找到第2页的组件工厂。

是否将此组件添加到

entryComponents

数组中？如果是，那么您在哪个模块（或组件）中添加了它？

找不到模块“../../dmy/dmy.module”。

也许您需要尝试其他路径，例如

app/dmy/dmy.module#DMYModule

您的

DMYModule

看起来如何？1。向entryComponents添加Page2或任何其他组件不是webpack建议的方式。2.我尝试了很多路径变体，但这与路径无关，问题是SystemJsNgModuleLoader不能用于webpack。3.DMYModule是一个简单的模块，其中包含一些测试页。

ComponentFactoryResolver

需要编译的组件，只需将此组件添加到

entryComponents

数组中即可实现。这样，angulat将为此组件编译工厂，并在

ComponentFactoryResolver

System.import("../../dmy/dmy.module.js")
            .then((module: any) => {
                return module["DMYModule"];
            }).then((type: any) => {
                return this._compiler.compileModuleAndAllComponentsAsync(type);
            }).then((moduleWithFactories: ModuleWithComponentFactories<any>) => {
                const factory = moduleWithFactories.componentFactories.find((x: any) => x.componentType.name === "Page1"); 
                this.tabs.push({ title: "--", component: factory["componentType"], factory: factory });
                this.selectedTabIndex = this.tabs.length - 1;
                this._cdr.detectChanges();
            });