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 site lazy loading

How to Implement

我有同样的问题，但在角度6中，似乎每个加载“延迟加载”的模块都必须从根模块（app.module.ts）中的进口声明中删除。至少对我有用。

Stack answer

Answer 2

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

聊天popup.component.ts

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

---

..对于电子邮件弹出组件也一样..

电子邮件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 { }