时间戳

首页 > 解决方案 > 使用 ngxBoostrap 模式的延迟加载有错误

angular - 使用 ngxBoostrap 模式的延迟加载有错误

问题描述

我有主要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.

我的 admin.module 是：

@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?

我跟着这个链接链接

我想提一下，在延迟加载之前一切都运行良好。

标签： angulartypescriptbootstrap-4ngx-bootstrap-modal

解决方案

如果您想在不使用的情况下创建它们，您必须将您的移动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

另一个更简单的解决方案

将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 { }

推荐阅读