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?

Tried not working @Faisal

Vikram R
– Vikram R

2018-04-23 06:07:14 +00:00
Commented Apr 23, 2018 at 6:07 — Vikram R
– Vikram R, Commented Apr 23, 2018 at 6:07

tlt · Accepted Answer · 2018-04-23 06:17:22Z

8

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

answered Apr 23, 2018 at 6:17

tlt

15.5k11 gold badges54 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vikram R Over a year ago

Thanks @dee zg got it my mistake

Cegone Over a year ago

Don't think, this will work, because, it will throw error like ' the component is part of the declarations of 2 modules'

Mohammad Daliri · Accepted Answer · 2018-04-23 06:24:01Z

4

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

answered Apr 23, 2018 at 6:24

Mohammad Daliri

1,4067 gold badges26 silver badges44 bronze badges

Comments

Fussel · Accepted Answer · 2018-04-23 06:22:40Z

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'
},

answered Apr 23, 2018 at 6:22

Fussel

1,8651 gold badge10 silver badges28 bronze badges

1 Comment

Cegone Over a year ago

This is working for me.. I think.. this should be accepted answer

Arash · Accepted Answer · 2018-04-23 06:07:11Z

1

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.

answered Apr 23, 2018 at 6:07

Arash

1,8455 gold badges24 silver badges37 bronze badges

4 Comments

Arash Over a year ago

had you imported AuditorloginModule to the target module ?

Vikram R Over a year ago

Why imported AuditorloginModule to app.module.ts?

Vikram R Over a year ago

If i will import AuditorloginModule to app.module.ts.its will not generated AuditorloginModule.chunk.js files

Arash Over a year ago

I didn't mean to app.module.ts , For example if you want to share X module for Z and Y module , you should import X for both modules and export X components in X module.

Rashi Goyal · Accepted Answer · 2020-07-24 12:38:31Z

Make it sure that your component is imported in app-routing.module.ts. In my case that it was the reason where I forgot to include the component in the deceleration

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    IndexComponent
  ],
  imports: [
    BrowserModule, FormsModule, HttpClientModule, RouterModule.forRoot(routes)
  ],
  exports: [RouterModule],
  providers: [],
  bootstrap: [AppComponent]
})

Also make sure you restart server when new modules and components are added while ng serve it is also a reaosn when this problem occur. So, the basic solution is to quit the server and ng serve again.

Collectives™ on Stack Overflow

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

5 Answers 5

2 Comments

Comments

1 Comment

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

4 Comments

Comments

Related