[解決済み] NullInjectorError: MatDialogRef 用のプロバイダがありません
2022-02-03 13:52:04
質問
ドキュメントにあるように MatDialogRef を注入することができないのですが。 https://material.angular.io/components/dialog/overview
実行しようとすると、エラーが発生します。
ERROR Error: 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のおかげで、私はこの問題を解決することができました。
MatDialogModule
,
MatDialog
と
MatDialogRef
から
@angular/material/dialog
ではなく
@angular/material
関連
-
[解決済み】エラー。どのルートにもマッチしません。URLセグメント: - Angular 2
-
[解決済み] Angular 2で簡単なアコーディオンを作成するにはどうすればよいですか?
-
[解決済み] LegendItemComponent をカスタマイズする Angular 用 kendo-ui
-
[解決済み] Angular 5:"ControlContainerのプロバイダがありません"
-
[解決済み] Uncaught (in promise): Ionic 2でcordova_not_available。
-
[解決済み] ローカルのワークスペース・ファイル('angular.json')が見つかりませんでした。しかし、同じコードが別のコンピュータで動作します
-
[解決済み] なぜ mat-tables matRowDef は 2 つの変数を含むのですか?
-
[解決済み] Angular InjectionTokenが「No provider for InjectionToken」をスローします。
-
[解決済み] AngularでKendo Tabstripのタブを閉じるボタンを実装する方法
-
[解決済み] AngularでNameServiceのプロバイダがない
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】VSCodeはモジュール'@angular/core'や他のモジュールを見つけることができません。
-
[解決済み】angularJS2プロジェクトでsystemjs.config.jsファイルをどこに置くか/見つけるか?
-
[解決済み】Angular: オブジェクトをサポートしているdiffが見つからない '[object Object]'
-
[解決済み】angularでpreflightのレスポンスがHTTP okステータスにならない。
-
[解決済み] Angular 2のコンポーネントプロパティにデフォルト値を設定する方法は?
-
[解決済み] NgModule が見つかりませんでした。NgModule でのインポートをスキップするには skip-import オプションを使用します。
-
[解決済み] なぜ mat-tables matRowDef は 2 つの変数を含むのですか?
-
[解決済み] ブレークポイントの解除 - VS Code | Chrome | Angular
-
[解決済み] Angular2において、テンプレートを必要としないコンポーネントがありますが、テンプレートエラーが発生します。
-
[解決済み] Angular 2 : NgModule のメタデータが見つかりません。