angular5 lazy load multiple component

Question

I have HeaderComponent,FootComponent and Customer Components.I had create CustomerModule and CustomerRoutingModule

CustomerModule

declarations: [CustomerComponent]

CustomerRoutingModule

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

App.routing

{ 
  path: 'custbasicdetails' ,
  loadChildren: 'app/customer/customer.module#CustomerModule' 
},

But i am getting error

  'header' is not a known element:
     1. If 'header' is an Angular component, then verify that it is part of this module.

EDITED :

HeaderComponent,FooterComponent in app.module.ts

Do you import (defined in declarations) the header-component in your modules? It must be imported in all modules where you want to use it. — Fussel
– Fussel, Commented Mar 29, 2018 at 7:27
But are you using those compoents in your CustomerModule aswell? Then you'd have to import them there aswell. — Fussel
– Fussel, Commented Mar 29, 2018 at 7:29
Its not work.I you get Error: Type HeaderComponent is part of the declarations of 2 modules: AppModule and CustomerModule! Please consider moving HeaderComponent to a higher module that imports AppModule and CustomerModule. You can also create a new NgModule that exports and includes HeaderComponent then import that NgModule in AppModule and CustomerModule. — Vikram R
– Vikram R, Commented Mar 29, 2018 at 7:35

Fateh Mohamed · Accepted Answer · 2018-03-29 11:30:30Z

1

i think you have to import your HeaderComponent and FootComponent in your app.module.ts only and put those 2 nested components in app.component.html. and you don't have to import your CustomerModule inside app module because it's a lazyloaded module. your app.module.ts will be like this:

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent, HeaderComponent,  FootComponent ]
  exports: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

and your app.component.html will be :

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer><app-footer>

and app.routes will be :

const routes: Routes = [
{ path: '', redirectTo: '/custbasicdetails', pathMatch: 'full' },
{ path: 'custbasicdetails' , loadChildren: 'app/customer/customer.module#CustomerModule' 
}
]

customer.routes

const routes: Routes = [
{ path: '', component: 'CustbasicdetailsComponent ', pathMatch: 'full' }
}
]

edited Mar 29, 2018 at 11:30

answered Mar 29, 2018 at 7:57

Fateh Mohamed

21.5k5 gold badges46 silver badges56 bronze badges

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

8 Comments

Vikram R Over a year ago

Thanks.But i can't get any customer.module.bundle.js file

Fateh Mohamed Over a year ago

for loadChildren try the relative path to you app.module , loadChildren: './customer/customer.module#CustomerModule

Vikram R Over a year ago

No error bro.. I have added const routes: Routes = [ { path: '', component: CustbasicdetailsComponent } ]; in CustomerRoutingModule

Vikram R Over a year ago

i didn't any chunk files for customer

Fateh Mohamed Over a year ago

try this, [ { path: '', component: CustbasicdetailsComponent, pathMatch: 'full' } ]

|

Tomasz Kula · Accepted Answer · 2018-03-29 07:46:18Z

1

Export Header, Footer and Customer components in their respective @NgModules.

Like this.

in customer.module.ts

@NgModule({
  imports: [CommonModule],
  declarations: [CustomerComponent],
  exports: [CustomerComponent],
})
export class CustomerModule {}

in app.module.ts

@NgModule({
  imports: [BrowserModule, CustomerModule],
  declarations: [AppComponent]
  exports: [],
  bootstrap: [AppComponent],
})
export class CustomerModule {}

Do the same for header and footer.

You declare component only once in a single @NgModule's declarations array. If you want to use this component in another @NgModule you must:

export the component by placing it in @NgModule's exports array.
import the @NgModule declaring the component into the @NgModule, that wants to use it, by placing it in that @NgModule imports array.

3 Comments

Vikram R Over a year ago

Can you explain briefly please. If you give Full Example i will appreciate

Tomasz Kula Over a year ago

Based on you comment above you need to remove HeaderComponent either from AppModule or CustomerModule. It must be a part of only a single @NgModule. You declare components only once in one @NgModule.

Vikram R Over a year ago

Thanks.But i can't get any customer.module.bundle.js file

Collectives™ on Stack Overflow

angular5 lazy load multiple component

2 Answers 2

8 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related