StaticInjectorError(AppModule)[MatDialogTitle -> MatDialogRef]

Question

我熟悉这个错误，但我是在更新到 Angular Material 6.4.7.

后才开始看到这个错误的

我所有的模块都引用我自己的 MaterialModule，它导出 MatDialogModule。我没有为 MatDialogRef 设置任何提供程序 - 以前不需要。

[MatDialogTitle -> MatDialogRef] 是怎么回事？这是什么意思？

一切似乎在开发和生产构建中都运行良好。我不知道是什么原因造成的。

有什么办法可以追溯到什么东西吗？？

谢谢

core.js:1673 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[MatDialogTitle -> MatDialogRef]: 
  StaticInjectorError(Platform: core)[MatDialogTitle -> MatDialogRef]: 
    NullInjectorError: No provider for MatDialogRef!
Error: StaticInjectorError(AppModule)[MatDialogTitle -> MatDialogRef]: 
  StaticInjectorError(Platform: core)[MatDialogTitle -> MatDialogRef]: 
    NullInjectorError: No provider for MatDialogRef!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1062)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1244)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1244)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
at resolveNgModuleDep (core.js:8369)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9057)
at resolveDep (core.js:9422)
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1062)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1244)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1244)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
at resolveNgModuleDep (core.js:8369)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9057)
at resolveDep (core.js:9422)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:3811)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
at invokeTask (zone.js:1540)

Answer 1

更新：因此，对于我的问题，我能够使用此 Bug 问题 [https://github.com/angular/material2/issues/8419] 中的提供程序来解决它。我将以下两行添加到我的 app.module 提供商列表中：

{ provide: MatDialogRef, useValue: {} },
{ provide: MAT_DIALOG_DATA, useValue: [] },

该错误是指测试问题，但对我来说，我有一个 MatDialog 可以工作，但另一个会抛出错误。

希望这对您有所帮助，adym

Answer 2

在你的MATERIAL.MODULE.TS

    import {MatDialogRef} from '@angular/material';

@NgModule({
providers: [MatDialogRef]
})

Answer 3

您遇到此问题是因为您在 html 布局上添加了对对话框的引用。请删除该引用并确保在使用它的模块上的 entryComponents 属性上添加对话框。参见 angular material docs here。您的模块声明应如下所示。

@NgModule({
  imports: [
    // ...
    MatDialogModule
  ],

  declarations: [
    AppComponent,
    ExampleDialogComponent
  ],

  entryComponents: [
    ExampleDialogComponent // THE MAGIC HAPPENDS HERE
  ],

  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Answer 4

是的，你必须在你的@NgModule 中写入 entryComponents，如下所示

entryComponents: [DialogComponent, GetDialogContent],

StaticInjectorError(AppModule)[MatDialogTitle -> MatDialogRef]

StaticInjectorError(AppModule)[MatDialogTitle -> MatDialogRef]

angular-material-6

angular-material-7