延迟加载模块中的 Angular Material 对话框

Question

在我的 Angular 应用程序中，我有一个名为 MaterialModule 的模块，其中包含以下内容：

imports: [
  MatDialogModule,
  ...
],
exports: [
  MatDialogModule,
  ...
]

它被导出到一个名为SharedModule的模块中：

@NgModule({
  imports: [
    MaterialModule,
    ...
  ],
  exports: [
    MaterialModule,
    ...
  ]
})
export class SharedModule { }

我想从我的一个延迟加载组件中显示一个对话框，所以在我的延迟加载模块中我导入这个SharedModule 并将对话框组件添加为一个入口组件：

@NgModule({
  declarations: [
    MyLazyLoadedComponent,
    MyDialogComponent,
    ...
  ],
  imports: [
    CommonModule,
    SharedModule,
    ...
  ],
  entryComponents: [MyDialogComponent]
})
export class MyLazyLoadedModule { }

但每当我尝试从MyLazyLoadedComponent 打开对话框时，我都会收到以下错误消息：

未找到 MyDialogComponent 的组件工厂。你添加到 @NgModule.entryComponents？

从非延迟加载的组件中打开对话框可以正常工作。

对于我的配置可能出现的问题，我非常感谢任何建议。

Answer 1

将组件放入 NgModule 声明的 entryComponents 部分将允许 Angular 将这些组件编译成组件工厂，因此允许组件解析器将它们添加到用于组件解析的内部映射中。 需要在MyLazyLoadedModule中直接导入MatDialogModule。

Angular v6+：如果您在另一个可注入服务中使用MatDialog 服务并且对该服务使用{ providedIn: 'root' } 选项，则您需要在对话框所在模块的 providers 数组中提供该服务组件已声明。