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:
