Reputation: 147
I am trying to do lazy loading angular2 module using router as shown in hero tutorial. In my network tab i can see the the files are getting downloaded in my browser but the component is not showing in my browser
//module
@NgModule({
declarations: [
CustomerDashboardComponent
],
exports: [
CustomerDashboardComponent
]
})
export class CustomerDashboardModule {
}
//component code
@Component({
selector: 'customer-dashboard',
templateUrl: 'customer-dashboard/customer-dashboard.html',
})
export class CustomerDashboardComponent extends OnInit{
constructor(private router: Router,
private homeService: HomeService,
private restService: RestService
) {
}
}
Upvotes: 1
Views: 501
Reputation: 182
I don't see your router code to load your component from the lazy loaded module. once your module is loaded using loadChildren your module should have a default routing option to load the component. add default routing in your lazy loaded module like below
//router code
loadChildren: 'src/customer-dashboard/customer-dashboard.module#CustomerDashboardModule'
//default routing definition code
const routes: Routes = [
{ path: '', component: CustomerDashboardComponent }
];
export const routing: ModuleWithProviders = RouterModule.forChild(routes);
//routing import in module
@NgModule({
imports: [
routing
],
declarations: [
CustomerDashboardComponent
],
exports: [
CustomerDashboardComponent
]
})
export class CustomerDashboardModule {
}
//component code
@Component({
selector: 'customer-dashboard',
templateUrl: 'customer-dashboard/customer-dashboard.html',
})
export class CustomerDashboardComponent extends OnInit{
constructor(private router: Router,
private homeService: HomeService,
private restService: RestService
) {
}
}
Upvotes: 2