NullInjectorError: Нет поставщика для MatDialog - попытка создать службу-оболочку для MatDialog

Question

Я новичок в кодировании и новичок в Angular, так что я подумал, что буду просить о помощи.Это мой первый вопрос, поэтому, пожалуйста, будьте терпеливы со мной.

Я хочу создать сервис-оболочку для Angular Material Dialog Service (я просто пытаюсь научить себя - это не для производственного приложения)поэтому я сделал сервис в своем приложении следующим образом:

import {Injectable} from '@angular/core';
import {MatDialog} from '@angular/material';

@Injectable({
  providedIn: 'root'
})
export class MatDialogWrapperService {

    constructor(private dialog: MatDialog) {
    }

    open(componentRef, config = {}) {
        this.dialog.open(componentRef, config);
    }
}

Теперь я пытаюсь добавить это к другому угловому компоненту в моем приложении, например, так: я импортирую его, добавляю в массив провайдеров, помещаю его вконструктор и затем поместите его в метод (я удалил часть кода для простоты чтения)

@Component({
    selector: 'app-intro-form',
    templateUrl: './intro-form.component.html',
    providers: [MatDialogWrapperService],
    styleUrls: ['./intro-form.component.scss']
})

  constructor(private modalService: MatDialogWrapperService ) {
  }

  modalCall() {
    this.modalService.open(ModalFormComponent, {
        width: '500px'
  });
}

Когда я загружаю свое приложение, я вижу следующую ошибку в консоли:

Необработанное отклонение обещания: StaticInjectorError (AppModule) [MatDialogWrapperService -> MatDialog]: StaticInjectorError (Платформа: ядро) [MatDialogWrapperService -> MatDialog]:

NullInjectorError: Нет провайдера!;Зона:;Задача: Promise.then;Значение: Ошибка: StaticInjectorError (AppModule) [MatDialogWrapperService -> MatDialog]: StaticInjectorError (Platform: core) [MatDialogWrapperService -> MatDialog]:

Я думал, что правильно ввел службу MatDialog в моей оболочке?Что я делаю неправильно?

Заранее спасибо.

Answer 1

Эта ошибка означает, что вы не включили модуль Material Dialog в свое приложение, поэтому нет поставщика.

В вашем app.module.ts убедитесь, что вы добавили MatDialogModule в свой импорт.

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    MatDialogModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Для дальнейшего использования необходимо включить модуль для любого компонента материала, который вы используете.Проверьте документацию для каждого, чтобы узнать, какой модуль вам нужен (хотя большинство из них говорят сами за себя)