LoginSignup
0
0

More than 3 years have passed since last update.

Material2 Dialog: no component factory found,did you add it to @NgModule.entryComponents?

Posted at

Material2 Dialog: no component factory found,did you add it to @NgModule.entryComponents?

Material2のDialogを使う際に出たエラー。Dialogは他のと違ってややこしい、の備忘録。

いちおうDialog OVERVIEWのページに書いてある。まあ英語なのと、たいてい他のMaterialはサンプルコード見れば使い方わかるのでOVERVIEW読まないよね。

インプリの仕方

たとえばapp.componentのページにボタンを付けてそのボタンをクリックするとモーダルウィンドウ(Dialog)が出るようにしたかったら。

app.component.ts
import {MatDialog, MatDialogConfig, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

 constructor(
    public dialog: MatDialog,
  ) {}

// Mat-Dialogでedit-dialog.component(編集用モーダル)を開く
  openDialog(post: Post) {
    this.dialog.open(EditDialogComponent, {
      width: '600px',
      data: post,
      disableClose: false
    });
  }

app.component.html
<button mat-raised-button (click)="openDialog(post)">編集</button>

postはObservableデータ。まあここではargumentに入れていろいろ渡せると思っておけばいい。このボタンをクリックするとDialogが開く。


Dialog画面用のコンポーネントを作る

EditDialogComponentはそのDialog画面を表示するコンポーネント。

ng g component editDialog
edit-dialog.component.ts
import { Component, OnInit, Inject} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';

  constructor(
    public dialogRef: MatDialogRef<EditDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: Post
  ) { }

  onClickCloseButton() {
    this.dialogRef.close();
  }
edit-dialog.component.html
<div>
<p>投稿者:{{data.userName}}のメッセージ編集</p>
    <form #f="ngForm" (ngSubmit)="updatePost(data)" name="form">       
…フォーム…
   </form>
   <br>
   <button mat-raised-button (click)="onClickCloseButton()">閉じる</button>
</div>

このようにDialogの中にフォームを作ってデータベースを編集・削除できるようにしてもいいし、ただ警告メッセージを表示するだけでもいいし。
ちなみにフォームを使うなら<button mat-raised-button (click)="onClickCloseButton()">閉じる</button><form></form>の外に出さないと(ngSubmit)に反応していまいます。


問題はここから。


エラーの原因

MatDialogの場合、app.module.tsを編集しなければならない

app.module.ts
//Material2モジュールのインポート
import {
  MatDialogModule,            // MatDialogに必要な記述
  MAT_DIALOG_DEFAULT_OPTIONS,  // MatDialogに必要な記述
} from '@angular/material';


declarations: [
    EditDialogComponent,
],

providers: [
    {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}}  // MatDialogに必要な記述
],

entryComponents: [EditDialogComponent],  // MatDialogに必要な記述

これは調べてもなかなかわからないっすー

以上

no component factory found,did you add it to @NgModule.entryComponents?

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0