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

我在使用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: {}
  });

但是，当直接导入组件（并从库中导出）时，我会得到以下（明显）错误：“

组件ChatPopupComponent不是任何NgModule的一部分，或者该模块尚未导入到您的模块中。”。由于它是一个延迟加载的模块，显然还没有导入

当我尝试以下方法时：

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

我得到以下错误-
加载模块错误：找不到EmailPopUpComponent的组件工厂。您是否已将其添加到@NgModule.entryComponents？

似乎显示组件的唯一方法是在
app.module.ts
中导入模块，尽管这与延迟加载模块的目标不符

有没有办法做到以上几点，或者我缺少了一些关于延迟加载模块和组件的基本知识？
您可以参考以下帮助我的链接



我也有同样的问题，但在angular 6中，似乎每个模块
必须从导入中删除已加载“lazy-loaded”
根模块（app.module.ts）中的声明。至少对我来说是这样
工作

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

chat-popup.component.ts


..对EmailPopupComponent执行相同的操作

email-popup.component.ts


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

chat.module.ts

您试图从中加载EmailPopupComponent的组件必须知道它。这意味着声明组件的模块需要以某种方式引用EmailPopupComponent。这可以通过以下两种方式完成：


在与要访问它的组件相同的模块中声明EmailPopupComponent
导入在其中声明EmailPopupComponent的模块，然后
在中导出（重要的是，它对于其他模块可见）
声明要访问它的组件的模块。例如，这应该在一个共享模块中完成，该模块包含分布在应用程序中的组件

除了导入模块之外，模块装饰器中还有一个所谓的entryComponents数组。除了tha模块中的引用之外，当您在类似于材质对话框的对话框中使用EmailPopupComponent时（如您在示例中所做的那样），该组件必须包含EmailPopupComponent。
您是否在组织/聊天模块的导出中添加了该组件？
@NgModule({
    imports: [
        CommonModule,
        ...
    ],
    declarations: [ChatPopupComponent],
    exports: [ChatPopupComponent],
})
export class ChatPopupModule { }

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

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