Is lazy loading creating new Injector in Angular?

Question

Reading official documentation of Angular

When the Angular router lazy-loads a module, it creates a new injector. This injector is a child of the root application injector. The router adds all of the providers from the root injector to the child injector. When the router creates a component within the lazy-loaded context, Angular prefers service instances created from these providers to the service instances of the application root injector.

Based on this I created a small app that has one service which is provided in App's root component. This service has a property which is bound to both lazy loaded component and eagerly loaded component. What I am expecting is, eagerly loaded component should use the service instance from old injector. Hence any changes in service's property by eager loaded component should not be reflected in lazy loaded component. Lazy loaded component should use the new service instance from child injector. But this doesn't happen. Can someone explain?

Here is the link to stackblitz.

yurzui yurzui · Accepted Answer · 2018-10-04T05:19:43

Is lazy loading creating new Injector in Angular?

Right.

For every lazy loaded module angular creates injector which is inherited from parent injector.

But it doesn't mean that this inherited injector will create new instance for each services provided in parent inject unless you provide this service in lazy loaded module. Otherwise Angular will traverse up to tree to find provided service and will find it on parent injector.

So simply add your service to LazyModule providers array and it will be registered in LazyModule injector and this way LazyComponent will get instance from lazy loaded injector.

@NgModule({
  imports: [
    CommonModule,
    LazyRoutingModule
  ],
  providers: [AppService],     <=================
  declarations: [LazyComponent]
})
export class LazyModule { }

I also suggest you reading this article

What you always wanted to know about Angular Dependency Injection tree

Update

From comment:

So shouldn't we have similar behaviour in case of lazy loading, as from doc. The router adds all of the providers from the root injector to the child injector.

I believe only the code.

When angular creates lazy loaded injector(NgModuleRef) it only passes reference to parent injector(NgModuleRef).

And when it resolves AppService dependency it first look at child injector and then at parent because there is no registered AppService in child injector

Is lazy loading creating new Injector in Angular?

1 Answers

Update