NullInjectorError: Нет провайдера для MatDialogRef

Я не могу внедрить MatDialogRef, как описано в документации: https://material.angular.io/components/dialog/overview

Когда я пытаюсь это сделать, я получаю сообщение об ошибке:

Ошибка: StaticInjectorError [MatDialogRef]: StaticInjectorError [MatDialogRef]: NullInjectorError: Нет поставщика для MatDialogRef!

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import {
	MatInputModule,
	MatDialogModule,
	MatProgressSpinnerModule,
	MatButtonModule,
	MatDialog,
	MatDialogRef
} from '@angular/material';

import { ApiModule } from '../api/api.module';
import { RoutingModule } from '../routing/routing.module';

import { RegistrationComponent } from './components/registration.component';
import { LoginComponent } from './components/login.component';

import { AccountService } from './services/account.service';

@NgModule({
	imports: [
		BrowserModule,
		MatInputModule,
		MatDialogModule,
		MatProgressSpinnerModule,
		MatButtonModule,
		FormsModule,
		RoutingModule,
		ApiModule
	],
	declarations: [
		RegistrationComponent,
		LoginComponent
	],
	entryComponents: [
		LoginComponent,
		RegistrationComponent
	],
	providers: [
		AccountService,
		MatDialog,
		MatDialogRef
	]
})
export class AccountModule {}

Ответ 1

Благодаря @Edric, я решил проблему, импортировав MatDialogModule, MatDialog и MatDialogRef из @angular/material/dialog вместо @angular/material

Ответ 2

У меня была эта ошибка при добавлении диалогов к сервису для совместного использования во многих компонентах. Просто чтобы уточнить, ошибка не присутствовала в приложении перед перемещением диалогов в службу. Решение состояло в том, чтобы включить основной поставщик MatDialogRef в основной модуль

  import {DialogService} from './services/dialog.service';
  import {MatDialogModule, MatDialogRef} from '@angular/material/dialog';
  ...
  imports: [
    ...
    MatDialogModule
  ],
  providers: [
     DialogService, {provide: MatDialogRef, useValue: {}},
  ],
  ...

С этим провайдером служба работала как единое целое с моими диалоговыми окнами, и провайдерская ошибка исчезла.

Ответ 3

Это может быть связано с тем, что вы не включаете полисполк API веб-анимации, который необходим для работы с угловыми анимациями, поскольку он полагается на API.

Здесь можно использовать браузер для браузеров, которые поддерживают его. В настоящее время только Chrome, Firefox и Opera поддерживают API веб-анимаций.

В любом случае, вы должны выполнить следующие шаги, чтобы получить полипол:

В терминале введите в консоли следующее:
```
npm install web-animations-js
```
Как только вы закончите установку, раскомментируйте строку для Angular Animations в polyfills.ts (или добавьте ее, если она там отсутствует):
```
import 'web-animations-js'; // Uncomment this line
```

Кроме того, вы можете попробовать импортировать модули из отдельных конечных точек, например:

От:

import { MatButtonModule, MatDialogModule } from '@angular/material';

Для того, чтобы:

import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';

Ответ 4

В вашем модуле достаточно импортировать только MatDialogModule из углового/материала. Не требуется импортировать и предоставлять: MatDialogRef
В вашем коде, где DialogComponent import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
Выше были следующие шаги. Не знаете, зачем вам импортировать его из диалога
Но не могли бы вы прояснить, какой селектор вы использовали в своем html/шаблоне? Если вы использовали "регистрационный компонент" в своем шаблоне, это может быть причиной того, что вы получите эту ошибку. Я опробовал тот же пример из руководства по материалам. Я случайно использовал "диалог-обзор-пример-диалог", а не "диалог-обзор-пример". = У меня такая же ошибка.

Ответ 5

Компонент, передаваемый методу открытия MatDialog, должен иметь в своем конструкторе MatDialogRef, как это сделано в примере.

@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

  onNoClick(): void {
    this.dialogRef.close();
  }

}

Я внедрял его в компонент, который вызывал MatDialog :: open, а не в компонент, переданный методу open, который вызывал эту ошибку.

Ответ 6

Для меня проблема заключалась в том, что я добавил свой компонент Dialog к другому HTML-шаблону просто для того, чтобы проверить его. Как только я удалил его, ошибка в OP исчезла, и он просто работал.