ドキュメントに記載されているように、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 {}
home.component.ts
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material';
import { RegistrationComponent } from '../account/components/registration.component';
@Component({
moduleId: module.id.replace('compiled', 'app'),
templateUrl: 'home.component.html'
})
export class HomeComponent
{
constructor(private modalService: MatDialog) {}
public openModal() : void
{
let dialog = this.modalService.open(RegistrationComponent, {});
}
}
registration.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { MatDialogRef } from '@angular/material/dialog';
import { User } from '../../../models/domain/User';
import { ApiUserService } from '../../api/entity-services/user.service';
import { AuthService } from '../../auth/auth.service';
import { AccountService } from '../services/account.service'
@Component({
selector: 'registration-component',
templateUrl: 'app/modules/account/templates/registration.component.html'
})
export class RegistrationComponent
{
public user :User = new User();
public errorMessage :string;
public isLoading :boolean;
constructor
(
private userService :ApiUserService,
private authService :AuthService,
private accountService :AccountService,
private router :Router,
public dialogRef :MatDialogRef<RegistrationComponent>
)
{
this.isLoading = false;
}
public onSubmit(e) :void
{
e.preventDefault();
this.isLoading = true;
this.userService
.Create(this.user)
.subscribe(
user =>
{
this.user.id = user.id;
this.user.login = user.login;
this.authService
.Login(this.user)
.subscribe(
token =>
{
this.accountService.Load()
.subscribe(
account =>
{
this.user = account;
this.isLoading = false;
this.dialogRef.close();
let redirectRoute = account.activeScopeId
? `/scope/${account.activeScopeId}`
: '/scope-list/';
this.router.navigate([redirectRoute]);
},
error => this.errorMessage = <any>error
);
},
error => this.errorMessage = <any>error
);
},
error => this.errorMessage = <any>error
);
}
}
@Edricのおかげで、@angular/material/dialog
の代わりに@angular/material
からMatDialogModule
、MatDialog
、およびMatDialogRef
をインポートすることで問題を解決しました。
多くのコンポーネントで共有されるダイアログをサービスに追加するときにこのエラーが発生しました。明確にするために、ダイアログをサービスに移動する前にエラーがアプリケーションに存在していなかった。解決策は、カスタムモジュールMatDialogRef
をメインモジュールに含めることでした
import {DialogService} from './services/dialog.service';
import {MatDialogModule, MatDialogRef} from '@angular/material/dialog';
...
imports: [
...
MatDialogModule
],
providers: [
DialogService, {provide: MatDialogRef, useValue: {}},
],
...
このプロバイダを使用すると、サービスは共有されるダイアログでシングルトンとして機能し、プロバイダのエラーはなくなりました。
APIに依存しているため、Angularアニメーションが機能するために必要なWeb Animations APIポリフィルが含まれていないことが原因である可能性があります。
caniuse は、ネイティブでサポートしているブラウザ向けです。現在、Chrome、Firefox、およびOperaのみがWeb Animations APIをサポートしています。
とにかく、次の手順に従ってポリフィルを取得する必要があります。
ターミナルで、コンソールに次のように入力します。
npm install web-animations-js
インストールが完了したら、Angular Animations for 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';
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
のコードでMatDialogのopenメソッドに渡されるコンポーネントには、 例 で行われるように、コンストラクターに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();
}
}
このエラーの原因となったopenメソッドに渡されたコンポーネントではなく、MatDialog :: openを呼び出していたコンポーネントに注入していました。
私にとって問題は、Dialogコンポーネントをテストするために他のHTMLテンプレートに追加したことです。削除すると、OPのエラーはなくなり、機能しました。