Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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?

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした