找不到未定义的组件工厂。但是确实使用SharedModule添加到@ NgModule.entryComponents

时间:2018-11-06 21:00:40

标签: angular angular-components angular-module angular-cli-v6

因此,我找到了许多文章来解释这个问题,并且大多数建议说将我的组件添加到@NgModule中的entryComponents数组中,但是我对我在许多模块中的位置或哪个entryComponents感到困惑。我的模块依赖性如下:

AppModule
 - EnvironmentModule
 - ContainerModule
 - SharedModule

EnvironmentModule
 - ContainerModule
 - EnvironmentListItemDetailComponent
    private _dialogRef: MatDialogRef<ConfirmDialogComponent>;

ContainerModule
 - MatDialogModule, 
 - ConfirmDialogComponent (this is the component that I want to move)
 - ContainerListItemDetailComponent
     private _dialogRef: MatDialogRef<ConfirmDialogComponent>;

基本上,我想将ConfirmDialogComponent从嵌套的子模块移动到环境和容器模块都可以依赖的共享模块。 (我也很想将ContainerModule从EnvironmentModule下移出,但这又是一天了)

因此,我想将ConfirmDialogComponent移到SharedModule中并进行所有连接,用于应用程序,环境,容器,共享的@NgModule是什么样的?我真的很困惑..所以这是我到目前为止的内容:

shared.module.ts:

@NgModule({
  imports: [
    CommonModule,
    MatDialogModule,
    BrowserAnimationsModule
  ],
  declarations: [
    ConfirmDialogComponent
  ],
  exports: [
    ConfirmDialogComponent
  ],
  entryComponents: [
    ConfirmDialogComponent
  ]
})
export class SharedModule { }

environment.module.ts:

@NgModule({
  imports: [
    HttpClientModule,
    CommonModule,
    FormsModule,
    EnvironmentRoutingModule,
    ContainerModule
  ],
  declarations: [
    EnvironmentListComponent,
    EnvironmentListEnvironmentsComponent,
    EnvironmentListItemDetailComponent,
    EnvironmentListItemComponent
  ],
  providers: [... ]
})

container.module.ts:

@NgModule({
  imports: [
    FormsModule,
    CommonModule,
    BrowserAnimationsModule,
    MatDialogModule,
    ContainerRoutingModule
  ],
  declarations: [
    KeysPipe,
    ContainerListComponent,
    ContainerListItemComponent,
    ContainerListItemDetailComponent,
    ParameterListComponent,
    ParameterListItemComponent,
    ParameterTypeInfoComponent,
    ConfirmDialogComponent
  ],
  exports: [
    ContainerListComponent
  ],
  providers: [...],
  entryComponents: [ ConfirmDialogComponent ]
})

app.module.ts:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    AppRoutingModule,
    HttpModule,
    ContainerModule,
    EnvironmentModule,
    LoginModule,
    SharedModule,
    PageNotFoundModule /* DO NOT MOVE THIS - as a result of routing peculiarities the order of child routes matter for handling wildcard ** https://stackoverflow.com/questions/40015385/angular-2-router-wildcard-handling-with-child-routes */
  ],
  providers: [
    AppConfigService,
    AuthGuardService,
    BootstrapService,
    EventBrokerService,
    HttpClientService,
    TruIdTokenService,
    StartupService,
    {
      provide: APP_INITIALIZER,
      useFactory: initConfiguration,
      deps: [StartupService],
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})

所以我不知道:\有点混乱,我甚至不确定我是否正确组织了所有依赖项。

2 个答案:

答案 0 :(得分:2)

所以我想我需要:

  1. 删除所有条目entryComponents
  2. ConfirmDialogComponent之外的所有模块中删除SharedModule的声明。
  3. SharedModule导入到使用ConfirmDialogComponent的模块中。
  4. entryComponents: [ ConfirmDialogComponent ]添加到SharedModule
  5. 更改任何子组件中的import { ConfirmDialogComponent }以使用共享组件的新位置

答案 1 :(得分:1)

  1. 删除所有条目entryComponents
  2. ConfirmDialogComponent之外的所有模块中删除SharedModule的声明。
  3. SharedModule导入到使用ConfirmDialogComponent的模块中。