web-dev-qa-db-ja.com

angular material MatDialogのプロバイダーがありません！エラー

Angularマテリアルモジュールを使用して、ボタンをクリックしてモデルを開くことを試みています。 https://material.angular.ioで提案されている例に従っています/ components/dialog/examples 。

しかし、アプリケーションを実行しようとすると、次のエラーが表示されます-

errors.js:48 ERROR Error: Uncaught (in promise): Error: StaticInjectorError[MatDialog]: 
  StaticInjectorError[MatDialog]: 
    NullInjectorError: No provider for MatDialog!
Error: StaticInjectorError[MatDialog]: 
  StaticInjectorError[MatDialog]: 
    NullInjectorError: No provider for MatDialog!
    at _NullInjector.get (injector.js:31)
    at resolveToken (injector.js:387)
    at tryResolveToken (injector.js:330)
    at StaticInjector.get (injector.js:170)
    at resolveToken (injector.js:387)
    at tryResolveToken (injector.js:330)
    at StaticInjector.get (injector.js:170)
    at resolveNgModuleDep (ng_module.js:103)
    at NgModuleRef_.get (refs.js:1037)
    at resolveDep (provider.js:455)
    at _NullInjector.get (injector.js:31)
    at resolveToken (injector.js:387)
    at tryResolveToken (injector.js:330)
    at StaticInjector.get (injector.js:170)
    at resolveToken (injector.js:387)
    at tryResolveToken (injector.js:330)
    at StaticInjector.get (injector.js:170)
    at resolveNgModuleDep (ng_module.js:103)
    at NgModuleRef_.get (refs.js:1037)
    at resolveDep (provider.js:455)
    at resolvePromise (zone.js:824)
    at resolvePromise (zone.js:795)
    at eval (zone.js:873)
    at ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (ng_zone.js:575)
    at ZoneDelegate.invokeTask (zone.js:424)
    at Zone.runTask (zone.js:192)
    at drainMicroTaskQueue (zone.js:602)
    at ZoneTask.invokeTask [as invoke] (zone.js:503)
    at invokeTask (zone.js:1540)
defaultErrorLogger @ errors.js:48

次のプロジェクトファイルの設定があります

app.module.ts

MatDialogModuleをインポートし、インポートにも同じように配置しました。 Entryコンポーネント内に、モーダルでレンダリングする必要があるコンポーネントを追加しました。

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

@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, FormsModule, NgbModule.forRoot(), ReactiveFormsModule, 
                  HttpClientModule, routing, MatTabsModule, MatDialogModule ],
  declarations: [ AppComponent, AppHeaderComponent, SignInComponent, RecruitmentHomeComponent, JobTemplatesComponent, CreateJobTemplateComponent ],
  bootstrap:    [ AppComponent ],
  entryComponents: [CreateJobTemplateComponent],
  providers: [AuthGuard, UserService, AuthenticationService]
})

Job-templates.component.tsのコード

これは、テンプレートに追加されたボタンをクリックしてモデルを呼び出すためのファイルです。

import { Component, OnInit } from '@angular/core';
import { CreateJobTemplateComponent } from './create-job-template/create-job-template.component';
import { MatDialog } from '@angular/material';


@Component({
  selector: 'app-job-templates',
  templateUrl: './job-templates.component.html',
  styleUrls: ['./job-templates.component.css']
})
export class JobTemplatesComponent implements OnInit {

  constructor(public dialog: MatDialog) { }

  ngOnInit() {
  }

  createjobtemplate(){
    let dialogRef = this.dialog.open(CreateJobTemplateComponent, {
      width: '250px'
    });
    //Set the dialogRef property of opened dialog with the obtained ref
    dialogRef.componentInstance.dialogRef = dialogRef;
  }

}

create-job-template.component.ts

このコンポーネントは、モーダルダイアログに表示されます。

import { Component, Inject, OnInit } from '@angular/core';
import { MatDialogRef } from '@angular/material';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-create-job-template',
  templateUrl: './create-job-template.component.html',
  styleUrls: ['./create-job-template.component.css']
})
export class CreateJobTemplateComponent implements OnInit {

  form: FormGroup;

  constructor(private formBuilder: FormBuilder, public dialogRef: MatDialogRef<CreateJobTemplateComponent>) { }

  ngOnInit() {
    this.form = this.formBuilder.group({
      filename: ''
    })
  }

  submit(form) {
    this.dialogRef.close(`${form.value.filename}`);
  }

}

誰かが私がここでどこが間違っているのか教えてもらえますか？私が探していたエラーのほとんどは、MatDialogRefの挿入の失敗に関するものですが、MatDialogでこのエラーが見つかりました。

また、このブログにも目を通し、同じ手順を踏んでいることを確認しました。 https://blog.thoughtram.io/angular/2017/11/13/easy-dialogs-with-angular-material.html

参考までに、私はコードを持っています

https://stackblitz.com/edit/angular-fhhmff

angularmodal-dialogangular-material
6
svijay.aug12

コンストラクタにMAT_DIALOG_DATAのインジェクタを追加するのを忘れたようです：

@Inject（MAT_DIALOG_DATA）パブリックデータ：任意

CreateJobTemplateComponentで、MAT_DIALOG_DATAをインポートする必要があります。

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

コンストラクタは次のようにする必要があります：

    constructor(@Inject(MAT_DIALOG_DATA) public data: any,
                private formBuilder: FormBuilder,
                public dialogRef: MatDialogRef<CreateJobTemplateComponent>) { }
1
sgabb

同じエラーがありました。インポートしていたことが判明

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

になるはずだった

import { MatDialog } from '@angular/material/dialog';

0
teddybear