CODEWITHSUNDEEP
angulartypescriptbootstrap-4ngx-bootstrap-modal
Kin Jong
Kin Jong

Reputation: 75

Lazy loading have error using ngxBoostrap modal

I have main AppRoutingModule class where I set my routes and add in my 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 { }

In appModuleI am add in imports module 

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

And in providers I am add NgbActiveModal. I want to lazy load admin.module and in this module I have modal.

My admin.module is :

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

  ],
  declarations: [
    AdminComponent,
    CategoryComponent,
    ProductModal

  ]
  , entryComponents: [
    CategoryComponent,
    ProductModal
  ]

})
export class AdminModule { }

All work good and that I click on the my modal I click on the modal, I have error : 

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

I followed this link link

I want to mention, everything was working good before Lazy loading.

Upvotes: 1

Views: 1281

Answers (1)

Ankesh
Ankesh

Reputation: 4885

You have to move your dynamic components to a higher level so that angular can find them if you want create them without using ng-templates

So in your case you add this to your app.module.ts

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

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


    })
    export class AppModule { }

Remove this from admin.module.ts

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

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

})
export class AdminModule { }

This should make your application generate Modals.

You can read more about entryComponents here

Another Simpler Solution

Move the Modal.forRoot() method to the LazyLoaded Module admin.module.ts

so your admin.module.ts becomes

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

  ],
  declarations: [
    AdminComponent,
    CategoryComponent,
    ProductModal

  ]
  , entryComponents: [
    CategoryComponent,
    ProductModal
  ]

})
export class AdminModule { }

Upvotes: 3

Related Questions