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: {}
  });

但是当直接导入组件（并从库中导出）时，我得到以下（明显的）错误：＆＃39; Component ChatPopupComponent is not part of any NgModule or the module has not been imported into your module＆＃39;。由于它是一个延迟加载的模块，它显然还没有导入。

当我尝试以下操作时：

   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声明为一个单独的模块。

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 { }

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

chat.module.ts

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

Answer 3

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

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

除导入模块外，模块装饰器中还有一个所谓的entryComponents数组。在诸如Material对话框之类的对话框中使用它时，除tha模块中的引用外，还必须包含EmailPopupComponent。

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

3 个答案: