Angular2 材质对话框有问题 - 您是否将其添加到 @NgModule.entryComponents？

角 9.0.0 <

从 Ivy 的 9.0.0 开始，不再需要 entryComponents 属性。请参阅弃用指南。

角 9.0.0 >

您需要将动态创建的组件添加到 @NgModule 内的 entryComponents

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog        
  ],
  entryComponents: [DialogResultExampleDialog]

注意：在某些情况下，延迟加载的模块下的 entryComponents 将不起作用，作为一种解决方法，请将它们放在您的 app.module（根）中

---

您需要使用 @NgModule 下的 entryComponents。

这适用于使用 ViewContainerRef.createComponent() 添加的动态添加的组件。将它们添加到 entryComponents 会告诉离线模板编译器编译它们并为它们创建工厂。

路由配置中注册的组件也会自动添加到 entryComponents，因为 router-outlet 还使用 ViewContainerRef.createComponent() 将路由组件添加到 DOM。

所以你的代码会像

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog        
  ],
  entryComponents: [DialogResultExampleDialog]

---

发生这种情况是因为这是一个动态组件，而您没有将它添加到 @NgModule 下的 entryComponents。

只需在此处添加：

@NgModule({
  /* ----------------- */
  entryComponents: [ DialogResultExampleDialog ] // <---- Add it here

看看 Angular 团队 是如何谈论 entryComponents 的：

entryComponents?: Array|any[]> 指定定义此模块时应编译的组件列表。对于这里列出的每个组件，Angular 都会创建一个 ComponentFactory 并将其存储在 ComponentFactoryResolver 中。

此外，这是 @NgModule 上的方法列表，包括 entryComponents...

如您所见，它们都是可选的（查看问号），包括接受一组组件的 entryComponents：

@NgModule({ 
  providers?: Provider[]
  declarations?: Array<Type<any>|any[]>
  imports?: Array<Type<any>|ModuleWithProviders|any[]>
  exports?: Array<Type<any>|any[]>
  entryComponents?: Array<Type<any>|any[]>
  bootstrap?: Array<Type<any>|any[]>
  schemas?: Array<SchemaMetadata|any[]>
  id?: string
})

---

如果您尝试在服务中使用 MatDialog - 我们称之为 'PopupService' 并且该服务在模块中定义：

@Injectable({ providedIn: 'root' })

那么它可能无法正常工作。我正在使用延迟加载，但不确定这是否相关。

你必须：

将您的 PopupService 直接提供给打开对话框的组件 - 使用 [提供：PopupService]。这允许它使用（通过 DI）组件中的 MatDialog 实例。我认为调用 open 的组件需要与此实例中的对话框组件位于同一模块中。

将对话框组件移动到您的 app.module （正如其他一些答案所说）

调用服务时传递 matDialog 的引用。

请原谅我的回答混乱，关键是 providedIn: 'root' 正在破坏，因为 MatDialog 需要搭载组件。

---

在延迟加载的情况下，您只需要在延迟加载的模块中导入 MatDialogModule 即可。然后这个模块将能够使用自己导入的 MatDialogModule 渲染入口组件：

@NgModule({
  imports:[
    MatDialogModule
  ],
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog        
  ],
  entryComponents: [DialogResultExampleDialog]

---

虽然集成材质对话框是可能的，但我发现这种微不足道的功能的复杂性非常高。如果您试图实现非平凡的功能，代码会变得更加复杂。

出于这个原因，我最终使用了 PrimeNG Dialog，我发现它使用起来非常简单：

m-dialog.component.html：

<p-dialog header="Title">
  Content
</p-dialog>

m-dialog.component.ts：

@Component({
  selector: 'm-dialog',
  templateUrl: 'm-dialog.component.html',
  styleUrls: ['./m-dialog.component.css']
})
export class MDialogComponent {
  // dialog logic here
}

m-dialog.module.ts：

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { DialogModule } from "primeng/primeng";
import { FormsModule } from "@angular/forms";

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    DialogModule
  ], 
  exports: [
    MDialogComponent,
  ], 
  declarations: [
    MDialogComponent
  ]
})
export class MDialogModule {}

只需将对话框添加到组件的 html 中：

<m-dialog [isVisible]="true"> </m-dialog>

PrimeNG PrimeFaces documentation 易于理解且非常精确。

---

您必须将其添加到 entryComponents，如 docs 中所指定。

@NgModule({
  imports: [
    // ...
  ],
  entryComponents: [
    DialogInvokingComponent, 
    DialogResultExampleDialog
  ],
  declarations: [
    DialogInvokingComponent,   
    DialogResultExampleDialog
  ],
  // ...
})

这是一个应用程序模块文件的 a full example，其中对话框定义为 entryComponents。

---

如果你和我一样，盯着这个线程想“但我不是想添加一个组件，我想添加一个保护/服务/管道等。”那么问题很可能是您在路由路径中添加了错误的类型。这就是我所做的。我不小心在路径的 component: 部分而不是 canActivate: 部分中添加了保护。我喜欢 IDE 自动完成功能，但你必须放慢速度并注意。如果您绝对找不到它，请对它所抱怨的名称进行全局搜索，并查看每个用法以确保您没有错误地使用名称。

---

就我而言，我将组件添加到声明和 entryComponents 并得到了相同的错误。我还需要将 MatDialogModule 添加到导入中。

---

如果有人需要从服务调用 Dialog，这里是如何解决问题的。我同意上述一些答案，我的答案是如果有人可能面临问题，则在服务中调用对话。

创建一个服务，例如 DialogService 然后将您的对话功能移动到服务中，并将您的对话服务添加到您调用的组件中，如下面的代码：

 @Component({
  selector: "app-newsfeed",
  templateUrl: "./abc.component.html",
  styleUrls: ["./abc.component.css",],
  providers:[DialogService]
})

否则你会得到错误

---

我有同样的问题，我在 EntryComponents 中有 dialogComponent，但它仍然无法正常工作。这就是我能够解决问题的方法。该链接位于先前已回答的帖子中：

https://stackoverflow.com/a/64224799/14385758

---