Lazy loading

The setup gets more complex once you start using lazy-loading.

Lazy-loading a module is akin to bootstrapping a module in that it creates a new injector out of the module and plugs it into the injector tree. To see it in action, let's update our application to load the talks module lazily.

@NgModule({
  declarations: [AppCmp],
  providers: [RouterModule.forRoot([
    {path: 'talks', loadChildren: 'talks'}
  ])]
})
class AppModule {}

@NgModule({
  declarations: [FormattedRatingPipe, WatchButtonCmp, \
    RateButtonCmp, TalkCmp, TalksCmp],
  entryComponents: [TalksCmp],
  providers: [TalksAppBackend, RouteModule.forChild([
    {path: '', component: TalksCmp}
  ])]
})
class TalksModule {}

With this change, the injector tree will look as follows: