【Anuglar】ボタンをクリックしてモーダルを表示させたいが、依存性注入のエラーが発生します。

実現したいこと

AngularのwebアプリにてBootstrapのModalを実装したいです。
ボタンを配置したページのtsファイルにmodalのservice.tsをインポートしてクリック時にモーダルウィンドウを展開したいです。
初めての質問であるため、不備があれば教えていただけると幸いです。

前提

@angular/cli 15.1.
typescript 4.9.5
"ngx-bootstrap": "^10.2.0",
他に提示すべき情報があればご教授下さい・

発生している問題・エラーメッセージ

Devtoolで以下のエラーメッセージが出力されます。

quiz.component.html:19 ERROR
NullInjectorError: R3InjectorError(QuizModule)[
QuizComponent -> QuizComponent -> 
QuizComponent -> QuizComponent -> 
QuizComponent]: 
  NullInjectorError: No provider for QuizComponent!

該当のソースコード

このコードがエラーの出る部分になります。

TypeSctipt
1openModal() {
2    this.modalRef = this.bsModal.show(ResultComponent, {});
3  }

以下conponent.tsファイルです

import { ModalService } from 'src/app/shared/modal/modal.service';
@Component({
  selector: 'name-quiz',
  templateUrl: './quiz.component.html',
  styleUrls: ['./quiz.component.scss'],
  providers: [ModalService]
})
constructor(private modalService: ModalService, private dataService: DataService, private router: Router){}

buttonClick(){
   this.modalService.openModal();
}

補足情報（FW/ツールのバージョンなど）

ボタンをクリックしたときにページのモーダルウィンドウ以外が暗転する状態になっており、モーダルウィンドウだけが出てきていないです。
作成したモーダルのservice内で問題があるのではないかと考えてますが、解決方法が分からず質問させていただきました。

行動規範の内容に同意します

回答1件

ベストアンサー

エラーの原因は、QuizComponentがプロバイダとして登録されていないためです。
QuizComponentをproviders配列に追加する必要がありますが、通常、コンポーネント自体をプロバイダとして追加することはありません。
代わりに、ModalServiceをproviders配列に追加することで、QuizComponentでModalServiceが利用できるようになります。

また、QuizComponentのconstructorでModalServiceを受け取る代わりに、BsModalServiceを受け取る必要があります。
これは、ngx-bootstrapモジュールからインポートされるべきです。
そして、openModal()メソッドをQuizComponentに移動し、ResultComponentを表示するように設定します。

以下のように修正してください。

１．QuizComponentのproviders配列からModalServiceを削除してください。
２．ModalServiceの代わりにBsModalServiceをインポートしてください。

import { Component, OnInit } from '@angular/core';
import { DataService } from 'src/app/services/data.service';
import { Router } from '@angular/router';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { ResultComponent } from '../result/result.component';

@Component({
selector: 'name-quiz',
templateUrl: './quiz.component.html',
styleUrls: ['./quiz.component.scss']
})
export class QuizComponent implements OnInit {
modalRef: BsModalRef;

constructor(private bsModal: BsModalService, private dataService: DataService, private router: Router) { }

ngOnInit(): void {
}

buttonClick() {
this.openModal();
}

openModal() {
this.modalRef = this.bsModal.show(ResultComponent, {});
}
}
ここで、ModalServiceは削除され、BsModalServiceが使用されるようになりました。
これで、ボタンをクリックすると、ResultComponentがモーダルウィンドウとして表示されるはずです。

この変更を行った後、依然として問題が発生する場合は、ResultComponentの設定やngx-bootstrapのインストールと設定が正しく行われているかを確認してください。

投稿2023/03/19 04:07