Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@atomyah

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?

1
Help us understand the problem. What is going on with this article?
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.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?