web-dev-qa-db-ja.com

Angular Dialog：DialogModuleのコンポーネントファクトリが見つかりません。

angular 6.の機能モデルを使用してダイアログを作成しようとしています。しかし、次のエラーが発生します。

DialogModuleのコンポーネントファクトリが見つかりません。 @ NgModule.entryComponentsに追加しましたか？

誰もが使い続けるように言い続けます

entryComponents：[DialogComponent]

私はすでにやっています。機能モジュールでそれを使用しようとしても成功しませんでした。ここに私は必要で簡単なファイルだと思います：

app.module.ts

import { DialogModule } from './components/dialog/dialog.module';
import { DialogComponent } from './components/dialog/dialog.component';
...

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  declarations: [..., AppComponent],
  imports: [DialogModule],
  entryComponents: [DialogComponent],

  providers: [..., MatDialogModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

dialog.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { DialogComponent } from './dialog.component';
...

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [..., DialogComponent],
  exports: [DialogComponent]
})
export class DialogModule {
  ...
}

some-other.component.ts

import { DialogModule } from '../../components/dialog/dialog.module';
...

@Component({
    ...
})

export class LanguageButtonComponent implements OnInit {

  constructor(private languageService : LanguageService,
    private dialog: MatDialog,) {
  }

  // activated from button
  openDialog() {
    this.dialog.open(DialogModule);
  }
}

エラーを取り除く方法は？

angulartypescriptdialogcomponents
14
hhh

エラーメッセージを正しく読み込めないことがわかりました。修正は変更することでした

this.dialog.open(DialogModule);

に

this.dialog.open(DialogComponent);

簡単な問題の解決策がWebの検索で見つからない場合、それはおそらくタイプミスであることを思い出させてください。

2
H36615

DialogComponentはentryComponentsではなくDialogModuleのAppModuleに入れる必要があります：

  1. entryComponentsを正しいモジュールに配置します

`` `javascript

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { DialogComponent } from './dialog.component';
...

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [DialogComponent],
  exports: [DialogComponent],
  entryComponents: [DialogComponent],
})
export class DialogModule {
    ...
}

「」

  1. entryComponentsをAppModuleから削除します
7
Bruno João

プロバイダーからMatDialogModuleを削除します

providers: [...],
1
Sajeetharan

私は this テーマを使用していて、モーダルダイアログが画面の左側に開いていて、このように完全に見えませんでした

enter image description here

そしてエラーを投げます

エラーエラー：DialogOverviewExampleDialogComponentのコンポーネントファクトリが見つかりません。 @ NgModule.entryComponentsに追加しましたか？

enter image description here

しかし、マテリアルルート内にあるダイアログコンポーネントでは問題なく動作していました。

enter image description here

マテリアルモジュールをチェックすると、必要なことがわかります。

DemoMaterialModule

エントリーポイント

entryComponents：[DialogOverviewExampleDialogComponent]

ダイアログコンポーネントがこれを必要とするため

enter image description here

したがって、単純な解決策は、この場合、このモジュールとコンポーネントモジュール内のエントリポイントを使用することです。私の場合、コンポーネントモジュールはpage.module.tsなので、必要なのはそれらを追加するとうまくいきます

//This is important
entryComponents: [DialogOverviewExampleDialogComponent]
,
declarations: [
MatIconComponent,
TimelineComponent,
InvoiceComponent,
PricingComponent,
HelperComponent,
SiteSearchComponent,

UserAdminComponent,
CreateUserComponent,
ManageUserComponent ,
//This is important   
DialogOverviewExampleDialogComponent

結果

enter image description here

また、定義済みのダイアログを使用する代わりに、コンポーネント内のコンポーネントの名前を変更するだけで、独自のダイアログを作成できます

 @Component({
selector: 'app-create-dialog-overview-example-dialog',
template: `<h1 mat-dialog-title class='data.class'>{{data.title}}</h1>
<div mat-dialog-content >
<p>{{data.message}}</p>

</div>
<div mat-dialog-actions>
<button mat-button tabindex="2" (click)="onNoClick()">Ok</button>

</div>`
})
export class YOURDIALOGCOMPONENTNAMEHERE {
constructor(
public dialogRef: MatDialogRef<YOURDIALOGCOMPONENTNAMEHERE>,
@Inject(MAT_DIALOG_DATA) public data: any
) {


 }

onNoClick(): void {
this.dialogRef.close();
}

}

ダイアログを開くとき

openDialog(): void {
    const dialogRef = this.dialog.open(YOURDIALOGCOMPONENTNAMEHERE,{
      width: '250px',
      data: { message: this.statusMessage ,class:this.class,title:this.title}

    });

最後に、これをルートモジュールコンポーネントとエントリに追加します。

entryComponents:[YOURDIALOGCOMPONENTNAMEHERE],
declarations:[YOURDIALOGCOMPONENTNAMEHERE
1
TAHA SULTAN TEMURI

私の場合、ルーティングモジュールに追加するのを忘れていました。

const routes: Routes = [ {path: '', component: MyDiaglogComponent},

0
meol

コンポーネントを使用しているモジュールが遅延ロードされたモジュールである場合、同じモジュール内にMatDialogModuleをインポートする必要がありますそれ以外の場合、entryComponentsにコンポーネントを追加した場合でも同じエラーが発生します。あるいは、マテリアルコンポーネントの共有モジュールを作成して、他のすべての必要なモジュールに共有モジュールをインポートすることもできます。

0
Franklin Pious