Question

我有一个主要的AppRoutingModule类，可以在其中设置路线并添加我的appModule：

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'shopCart', component: ShopCartComponent },
  { path: 'administration', loadChildren: './admin/admin.module#AdminModule' },
  { path: 'productsList', loadChildren: './products/products.module#ProductsModule' },
  { path: 'not-found', component: PageNotFoundComponent, data: { message: 'Page not found!' } },
  { path: '**', redirectTo: '/not-found' }
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules })

  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在appModule中，我将添加导入模块

ModalModule.forRoot(),
NgbModule.forRoot(),

然后在providers中添加NgbActiveModal。我要延迟加载admin.module，在此模块中，我有modal。

我的管理员模块是：

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    FormsModule,
    AdminRoutingModule,
    NgbModule,
    AlertModule.forRoot()

  ],
  declarations: [
    AdminComponent,
    CategoryComponent,
    ProductModal

  ]
  , entryComponents: [
    CategoryComponent,
    ProductModal
  ]

})
export class AdminModule { }

一切正常，我单击模态，然后单击模态，但出现错误：

ERROR Error: No component factory found for CategoryComponent. Did you add it to @NgModule.entryComponents?

我点击了此链接link

我想说的是，在延迟加载之前，一切都很好。

Answer 1

您必须将dynamic components移到更高的位置，以便angular可以在不使用ng-templates的情况下找到它们

因此，您可以将其添加到app.module.ts

    @NgModule({
      declarations: [
        // Other imports....

      ],
      entryComponents: [
        CategoryComponent,
        ProductModal
      ],
      providers: [
           // other providers...
        ],
      bootstrap: [AppComponent],


    })
    export class AppModule { }

从admin.module.ts删除

@NgModule({
  imports: [
    // Other Imports....    
  ],
  declarations: [
    AdminComponent,
    // CategoryComponent, -> Removed
    // ProductModal -> Removed

  ]
  , entryComponents: [
    // CategoryComponent, -> Removed
    // ProductModal -> Removed
  ]

})
export class AdminModule { }

这应该使您的应用程序生成模态。

您可以了解有关entryComponents here

的更多信息

另一个更简单的解决方案

将Modal.forRoot()方法移至LazyLoaded模块admin.module.ts

因此您的admin.module.ts成为

@NgModule({
  imports: [
    // Add this, Remove for `app.module.ts`
    ModalModule.forRoot(),

  ],
  declarations: [
    AdminComponent,
    CategoryComponent,
    ProductModal

  ]
  , entryComponents: [
    CategoryComponent,
    ProductModal
  ]

})
export class AdminModule { }

延迟加载使用ngxBoostrap模态时出错

1 个答案: