延迟加载模块的 Angular 6 显示组件

Question

我在使用 Angular 6 从延迟加载模块加载组件时遇到问题。

我使用 CLI 创建了一个库 -ng 生成库@org/chat

更新了 angular.json 文件以包含:

"lazyModules": [
   "dist/org/chat"
],

然后通过 AppComponent 成功加载模块:

constructor(private _injector: Injector, private loader: SystemJsNgModuleLoader, public dialog: MatDialog) {}

load() {
   this.loader.load('dist/org/chat#ChatModule').then(moduleFactory => {
    const moduleRef = moduleFactory.create(this._injector);
   });
}

到目前为止一切顺利，正在加载模块。

但是，ChatModule 有一个名为 ChatPopupComponent 的组件，我找不到使用对话框(或将其添加到 ViewChild 容器)来显示它的方法。

为了在对话框中打开一个组件，它需要在模块的 entryComponents 下声明并在 AppComponent 级别导入:

 let dialogRef = this.dialog.open(ChatPopupComponent
     data: {}
  });

但是当直接导入组件(并从库中导出它)时，我得到以下(明显的)错误:'Component ChatPopupComponent is not part of any NgModule or the module has not been imported into your module'。由于它是一个惰性加载模块，显然还没有导入。

当我尝试以下操作时:

   let name: any = 'ChatPopupComponent';
   let dialogRef = this.dialog.open(name
         data: {}
      });

我收到以下错误 - 错误加载模块错误:找不到 EmailPopUpComponent 的组件工厂。你把它添加到@NgModule.entryComponents了吗？

似乎显示组件的唯一方法是在 app.module.ts 中导入模块，尽管它违背了延迟加载模块的目标。

有没有办法完成上述操作，或者我是否遗漏了一些关于延迟加载模块和组件的基本知识？

Answer 1

尝试将 ChatPopupComponent 声明为单独的模块..

chat-popup.component.ts

@NgModule({
    imports: [
        CommonModule,
        ...
    ],
    declarations: [ChatPopupComponent],
    exports: [ChatPopupComponent],
})
export class ChatPopupModule { }

---

..对 EmailPopupComponent 做同样的事情..

email-popup.component.ts

@NgModule({
    imports: [
        CommonModule,
        ...
    ],
    declarations: [EmailPopupComponent],
    exports: [EmailPopupComponent],
})
export class EmailPopupModule { }

---

..并将这两个模块添加到 ChatModule 导入以及 entryComponents 数组中..

chat.module.ts

@NgModule({
    imports: [
        CommonModule,
        ...
        ChatPopupModule,
        EmailPopupModule,
    ],
    declarations: [
        ...
    ],
    entryComponents: [
        ChatPopupComponent,
        EmailPopupComponent,
    ]
})
export class ChatModule { }