首页 > 解决方案 > Angular Dialog:找不到 DialogModule 的组件工厂。

问题描述

尝试使用角度 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 {}

对话框.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

解决方案


你必须把你的DialogComponentinentryComponentsDialogModule不是 in AppModule

  1. 放置entryComponents在正确的模块中

    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

推荐阅读