Reese Davis
Reese Davis

Reputation: 147

angular2 router lazy load not injecting component

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

Answers (1)

Gagandeep Kaur
Gagandeep Kaur

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

Related Questions