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

Question

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

我使用CLI创建了一个库 - ng generate library @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: {}
      });

我收到以下错误 - error loading module Error: No component factory found for EmailPopUpComponent. Did you add it to @NgModule.entryComponents?

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

有没有办法做到上述或我错过了关于延迟加载模块和组件的基本知识？

Answer 1

您可以参考以下对我有帮助的链接

Angular 站点延迟加载

如何实施

我也遇到了同样的问题，但在 Angular 6 中，似乎每个加载“延迟加载”的模块都必须从根模块（app.module.ts）的导入声明中删除。至少对我来说是有效的。

堆栈答案