web-dev-qa-db-ja.com

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 {}

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
                        );
        }
}
angulartypescriptangular-materialangular5
19
rc21

@Edricのおかげで、@angular/material/dialogの代わりに@angular/materialからMatDialogModule、MatDialog、およびMatDialogRefをインポートすることで問題を解決しました。

15
rc21

多くのコンポーネントで共有されるダイアログをサービスに追加するときにこのエラーが発生しました。明確にするために、ダイアログをサービスに移動する前にエラーがアプリケーションに存在していなかった。解決策は、カスタムモジュールMatDialogRefをメインモジュールに含めることでした

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

このプロバイダを使用すると、サービスは共有されるダイアログでシングルトンとして機能し、プロバイダのエラーはなくなりました。

23
FRECIA

APIに依存しているため、Angularアニメーションが機能するために必要なWeb Animations APIポリフィルが含まれていないことが原因である可能性があります。

caniuse は、ネイティブでサポートしているブラウザ向けです。現在、Chrome、Firefox、およびOperaのみがWeb Animations APIをサポートしています。

とにかく、次の手順に従ってポリフィルを取得する必要があります。

  1. ターミナルで、コンソールに次のように入力します。

    npm install web-animations-js

  2. インストールが完了したら、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';
2
Edric
  • モジュール内：角度/マテリアルからMatDialogModuleのみをインポートするだけで十分です。インポートして提供する必要はありません：MatDialogRef
  • DialogComponent import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';のコードで
  • 上記は、私が従った手順です。ダイアログからインポートする必要がある理由がわからない
  • しかし、html/templateで使用したセレクターを明確にしてください。テンプレートで「登録コンポーネント」を使用している場合は、このエラーが発生する理由になる可能性があります。マテリアルガイドからまったく同じ例を試してみました。誤って「dialog-overview-example」ではなく「dialog-overview-example-dialog」を使用しました。 =同じエラーが発生しました。
1
Charith

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を呼び出していたコンポーネントに注入していました。

0
Stack Underflow

私にとって問題は、Dialogコンポーネントをテストするために他のHTMLテンプレートに追加したことです。削除すると、OPのエラーはなくなり、機能しました。

0
VIBrunazo