Angular2マテリアルダイアログには問題があります-@ NgModule.entryComponentsに追加しましたか？

https://material.angular.io/components/component/dialogのドキュメントをフォローしようとしていますが、以下の問題がある理由を理解できません。

私はコンポーネントに以下を追加しました：

@Component({
  selector: 'dialog-result-example-dialog',
  templateUrl: './dialog-result-example-dialog.html',
})
export class DialogResultExampleDialog {
  constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {}
}

私のモジュールに追加しました

import { HomeComponent,DialogResultExampleDialog } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog
  ],

// ...

それでも私はこのエラーを受け取ります...

EXCEPTION: Error in ./HomeComponent class HomeComponent - inline template:53:0 caused by: No component factory found for DialogResultExampleDialog. Did you add it to @NgModule.entryComponents?
    ErrorHandler.handleError @ error_handler.js:50
    next @ application_ref.js:346
    schedulerFn @ async.js:91
    SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
    SafeSubscriber.next @ Subscriber.js:172
    Subscriber._next @ Subscriber.js:125
    Subscriber.next @ Subscriber.js:89
    Subject.next @ Subject.js:55
    EventEmitter.emit @ async.js:77
    NgZone.triggerError @ ng_zone.js:329
    onHandleError @ ng_zone.js:290
    ZoneDelegate.handleError @ zone.js:246
    Zone.runTask @ zone.js:154
    ZoneTask.invoke @ zone.js:345
    error_handler.js:52 ORIGINAL EXCEPTION: No component factory found for DialogResultExampleDialog. Did you add it to @NgModule.entryComponents?
    ErrorHandler.handleError @ error_handler.js:52
    next @ application_ref.js:346
    schedulerFn @ async.js:91
    SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
    SafeSubscriber.next @ Subscriber.js:172
    Subscriber._next @ Subscriber.js:125
    Subscriber.next @ Subscriber.js:89
    Subject.next @ Subject.js:55
    EventEmitter.emit @ async.js:77
    NgZone.triggerError @ ng_zone.js:329
    onHandleError @ ng_zone.js:290
    ZoneDelegate.handleError @ zone.js:246
    Zone.runTask @ zone.js:154
    ZoneTask.invoke @ zone.js:345

動的に作成されたコンポーネントをentryComponents内部に追加する必要があります@NgModule

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog        
  ],
  entryComponents: [DialogResultExampleDialog]

注：いくつかのケースではentryComponents下の怠惰なロードされたモジュールの回避策は、あなたの中に入れて、動作しませんapp.module（ルート）

entryComponents以下で使用する必要があります@NgModule。

これは、を使用して追加される動的に追加されるコンポーネント用ViewContainerRef.createComponent()です。それらをentryComponentsに追加すると、オフラインテンプレートコンパイラにそれらをコンパイルしてファクトリを作成するように指示します。

はDOMにルーティングされたコンポーネントを追加するentryComponentsためにrouter-outletも使用さViewContainerRef.createComponent()れるため、ルート構成に登録されたコンポーネントも自動的に追加されます。

したがって、コードは次のようになります

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog        
  ],
  entryComponents: [DialogResultExampleDialog]

これは動的コンポーネントであり、あなたがそれをentryComponentsunderに追加しなかったために起こります@NgModule。

そこに追加するだけです：

@NgModule({
  /* ----------------- */
  entryComponents: [ DialogResultExampleDialog ] // <---- Add it here

Angularチームがどのように話しているかを見てくださいentryComponents：

entryComponents?: Array<Type<any>|any[]>

このモジュールの定義時にコンパイルする必要があるコンポーネントのリストを指定します。ここにリストされているコンポーネントごとに、AngularはComponentFactoryを作成し、ComponentFactoryResolverに格納します。

また、これは... を@NgModule含む方法のリストentryComponentsです

ご覧のとおりentryComponents、コンポーネントの配列を受け入れるものを含め、それらはすべてオプションです（疑問符を見てください）。

@NgModule({ 
  providers?: Provider[]
  declarations?: Array<Type<any>|any[]>
  imports?: Array<Type<any>|ModuleWithProviders|any[]>
  exports?: Array<Type<any>|any[]>
  entryComponents?: Array<Type<any>|any[]>
  bootstrap?: Array<Type<any>|any[]>
  schemas?: Array<SchemaMetadata|any[]>
  id?: string
})

MatDialogサービス内で使用しようとしている場合-それ'PopupService'を呼び出しましょう。そのサービスは次のようにモジュールで定義されています。

@Injectable({ providedIn: 'root' })

その後、機能しない場合があります。私は遅延読み込みを使用していますが、それが関連しているかどうかはわかりません。

必ず：

• PopupServiceを使用して、ダイアログを開くコンポーネントに直接提供します[ provide: PopupService ]。これによりMatDialog、コンポーネント内のインスタンスを（DIで）使用できます。openこの場合、コンポーネントの呼び出しはダイアログコンポーネントと同じモジュール内にある必要があると思います。
• ダイアログコンポーネントをapp.moduleに移動します（他のいくつかの回答が言っているように）
• matDialogサービスを呼び出すときに参照を渡します。

MatDialogがコンポーネントをピギーバックする必要があるため、問題が壊れているというのが私の混乱した答えです。providedIn: 'root'

遅延読み込みの場合、遅延読み込みモジュールにMatDialogModuleをインポートするだけです。次に、このモジュールは、独自のインポートされたMatDialogModuleを使用してエントリコンポーネントをレンダリングできます。

@NgModule({
  imports:[
    MatDialogModule
  ],
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog        
  ],
  entryComponents: [DialogResultExampleDialog]

マテリアルダイアログの統合は可能ですが、そのような些細な機能の複雑さはかなり高いことがわかりました。重要な機能を実現しようとすると、コードはさらに複雑になります。

そのため、私はPrimeNG Dialogを使用することになりました。

m-dialog.component.html：

<p-dialog header="Title">
  Content
</p-dialog>

m-dialog.component.ts：

@Component({
  selector: 'm-dialog',
  templateUrl: 'm-dialog.component.html',
  styleUrls: ['./m-dialog.component.css']
})
export class MDialogComponent {
  // dialog logic here
}

m-dialog.module.ts：

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { DialogModule } from "primeng/primeng";
import { FormsModule } from "@angular/forms";

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    DialogModule
  ], 
  exports: [
    MDialogComponent,
  ], 
  declarations: [
    MDialogComponent
  ]
})
export class MDialogModule {}

ダイアログをコンポーネントのhtmlに追加するだけです。

<m-dialog [isVisible]="true"> </m-dialog>

PrimeNG PrimeFacesのドキュメントは、理解しやすく、非常に正確です。

docsでentryComponents指定されているように、に追加する必要があります。

@NgModule({
  imports: [
    // ...
  ],
  entryComponents: [
    DialogInvokingComponent, 
    DialogResultExampleDialog
  ],
  declarations: [
    DialogInvokingComponent,   
    DialogResultExampleDialog
  ],
  // ...
})

以下は、ダイアログがとして定義されているアプリモジュールファイルの完全な例ですentryComponents。

私のようで、このスレッドを見つめながら、「コンポーネントを追加しようとしているのではなく、ガード/サービス/パイプなどを追加しようとしている」と考えている場合 次に、ルーティングパスに間違ったタイプを追加したことが問題である可能性があります。それが私がしたことです。canActivate：セクションではなく、パスのcomponent：セクションに誤ってガードを追加しました。IDEのオートコンプリートは大好きですが、少し遅くして注意を払う必要があります。どうしても見つからない場合は、不満のある名前をグローバルに検索し、すべての使用法を調べて、名前を間違えていないことを確認してください。

私の場合、コンポーネントを宣言とentryComponentsに追加すると、同じエラーが発生しました。インポートにMatDialogModuleを追加する必要もありました。

誰かがサービスからDialogを呼び出す必要がある場合は、ここで問題を解決する方法です。上記の回答のいくつかに同意します。私の回答は、誰かが問題に直面した場合にサービスのダイアログを呼び出すためのものです。

DialogServiceなどのサービスを作成し、ダイアログ関数をサービス内に移動して、以下のコードのように、呼び出すコンポーネントにダイアログサービスを追加します。

 @Component({
  selector: "app-newsfeed",
  templateUrl: "./abc.component.html",
  styleUrls: ["./abc.component.css",],
  providers:[DialogService]
})

そうしないと、エラーが発生します