web-dev-qa-db-ja.com

Angular MaterialおよびJasmine: "InjectionToken MdDialogDataのプロバイダーはありません!"

Angular Material MdDialogで使用されることを意図したコンポーネントがあります:

@Component({
  ...
})
export class MyComponent {

  constructor(@Inject(MD_DIALOG_DATA) public data: any, public dialogRef: 
MdDialogRef<MyComponent>) {
...
  }


}

私はジャスミンでそれをユニットテストしようとしています:

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        SharedTestingModule,
      ],
      declarations: [
        MyComponent,
      ],
    })
    .compileComponents();
  }));

  ...

});

残念ながら、次のエラーが表示されます。

エラー:InjectionToken MdDialogDataのプロバイダーがありません!

SharedTestingModuleは、カスタムAngular Materialモジュールをインポートおよびエクスポートします。これは、MdDialogModuleをインポートおよびエクスポートします。

このエラーを取り除くにはどうすればよいですか?

どうもありがとうございました!

Angular 4.2.4
Angular Material 2.0.0-beta.7
Jasmine 2.5.3
34
Wenneguen

私はこれを追加しました:

providers: [
    { provide: MD_DIALOG_DATA, useValue: {} },
    { provide: MdDialogRef, useValue: {} }
]

そしてそれは動作します:)

助けてくれてありがとう@methgaard!

63
Wenneguen

Angular 5の場合、最新の材料コンポーネント

 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';

そして

 providers: [
     { provide: MAT_DIALOG_DATA, useValue: {} },
     { provide: MatDialogRef, useValue: {} }
 ]
48
Kamruzzaman

これを試して

beforeEach(async(() => {
 TestBed.configureTestingModule({
   imports: [
     SharedTestingModule,
   ],
   declarations: [
     MyComponent,
   ],
   providers: [ <-- here
    {
     provide: MdDialogData,
     useValue: {},
    }
   ] <-- to here 
 })
 .compileComponents();
}));

それがどうなるか教えてください

9
methgaard

更新として、これはプレフィックス「Mat」のタグを使用するユーザーにも複製されます

providers: [{provide: MAT_DIALOG_DATA, useValue: {}}, 
{provide: MatDialogRef, useValue: {}}]
9
mehs2690

プロバイダーを指定せずに、ジャスミンテストでMAT_DIALOG_DATA/MAT_BOTTOM_SHEET_DATAを挿入できます。挿入される値が非ヌルであることを確認する必要があります。 nullの場合、コンパイラは存在しないプロバイダーのnull値を間違え、プロバイダーが見つからないというエラーが表示されます。

0
Bob