angular2 router lazy load not injecting component

Question

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

Gagandeep Kaur · Accepted Answer · 2016-11-20 16:53:03Z

2

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

answered Nov 20, 2016 at 16:53

Gagandeep Kaur

1821 gold badge1 silver badge9 bronze badges

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

2 Comments

Reese Davis Over a year ago

I am able to see the module and component is loaded in the browser.

Gagandeep Kaur Over a year ago

Yes. loadChildren is lazy loading the module and component but its not showing in the browser because of the router is missing.

Collectives™ on Stack Overflow

angular2 router lazy load not injecting component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related