3

Angular docs I'm not sure if I understand

Angular providers documentation states:

When the Angular router lazy-loads a module, it creates a new injector. This injector is a child of the root application injector. Imagine a tree of injectors; there is a single root injector and then a child injector for each lazy loaded module. 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.

Any component created within a lazy loaded module’s context, such as by router navigation, gets the local instance of the service, not the instance in the root application injector. Components in external modules continue to receive the instance created for the application root.

Question

Does it mean that when I access any globally declared provider in a lazy loaded module, I access it's copy, which is separate from the instance created in the root injector?

Let's say I have 2 situations:

Situation A

  • root module AppModule
    • provides ProviderX
    • declares AppComponent
      • injects ProviderX
  • lazy loaded module SubpageModule
    • no providers
    • declares SubpageComponent
      • injects ProviderX

Situation B

  • root module AppModule
    • provides ProviderX
    • declares AppComponent
      • injects ProviderX
  • lazy loaded module SubpageModule
    • provides ProviderX
    • declares SubpageComponent
      • injects ProviderX

In situation A does the instance of ProviderX in SubpageComponent is the same instance as in AppComponent or a different one? I understand in situation B they're not.

Robert Kusznier
  • 6,471
  • 9
  • 50
  • 71
  • 2
    It should be the same instance. If it shouldn't then provide reproduction – yurzui Jan 26 '18 at 11:10
  • @yurzui What does "Any component created within a lazy loaded module’s context, such as by router navigation, gets the local instance of the service, not the instance in the root application injector. " mean then? Do you think it's a mistake? – Robert Kusznier Jan 26 '18 at 11:14
  • 1
    It means that there are two providers: within root and lazy context. If we are trying to access to this provider then angular prefers service instances created from lazy providers to the service instances of the application root injector. – yurzui Jan 26 '18 at 11:18
  • If we didn't provide any services within lazy context then angular will get it from root injector – yurzui Jan 26 '18 at 11:19
  • Get it now. I was confused if they don't mean that it happens all the time - no matter if there is a provider in the child (lazy loaded) injector or not. – Robert Kusznier Jan 26 '18 at 11:23
  • My first comment refers to the first question. I didn't know that you are going to spread questions:) – yurzui Jan 26 '18 at 11:25

1 Answers1

6

Situation A

AppComponent and SubpageComponent get the same instance injected

Situation B

AppComponent and SubpageComponent get different instances injected

With your setup you get an injector hierarchy like

- AppModule
 |- AppComponent
 |- SubPageModule
   |- SubpageComponent

Angular searches from the location where it needs to inject a value the tree structure upwards until it finds the first matching provider. Then it injects the instance provided by the first found provider.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567