Angular Lazy Loading ( the module has not been imported into your module)

Question

I am using Angular 5.2.10 and trying to make application to lazy loading.so creating new module for AuditorloginComponent and i have removed my AuditorloginComponent from app.module.ts

auditorlogin.module.ts

@NgModule({
  imports: [
    CommonModule,
    AuditorloginRoutingModule,FormsModule
  ],
  declarations: [AuditorloginComponent]
})
export class AuditorloginModule { } 

auditorlogin-routing.module.ts

const routes: Routes = [
  { 
    path: '',
    component: AuditorloginComponent
}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AuditorloginRoutingModule { }

app.routing.ts

I have added loadChildren

 {
    path: 'auditorlogin',
    loadChildren: 'app/auditor/auditorlogin/auditorlogin-routing.module#AuditorloginRoutingModule',
    pathMatch: 'full'
  },

But i am getting

core.js:1449 ERROR Error: Uncaught (in promise): Error: Component AuditorloginComponent is not part of any NgModule or the module has not been imported into your module.

Error: Component AuditorloginComponent is not part of any NgModule or the module has not been imported into your module

Kindly tell to me where is my mistake?

Answer 1

you don't have your component in AuditorloginRoutingModule declarations:[...]

Answer 2

Your problem is in AuditorloginRoutingModule . you must be added AuditorloginComponent in declration like this

const routes: Routes = [
  { 
    path: '',
    component: AuditorloginComponent
}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  declarations: [
    // components that are used will be added here.
    AuditorloginComponent]
})
export class AuditorloginRoutingModule { }

Answer 3

You are only lazy loading the routing module, while you should load the AuditorloginModule which then uses the AuditorloginRoutingModule for routing and not the other way round.

{
    path: 'auditorlogin',
    loadChildren: 'app/auditor/auditorlogin/auditorlogin.module#AuditorloginModule',
    pathMatch: 'full'
},

Answer 4

Change AuditorloginModule to

@NgModule({
  imports: [
    CommonModule,
    AuditorloginRoutingModule,FormsModule
  ],
  declarations: [AuditorloginComponent],
  export: [AuditorloginComponent]
})
export class AuditorloginModule { } 

And then declare AuditorloginComponent to any module which you want to use it in.