Service duplicated with lazy loaded module

🐞 bug report

Affected Package

I guess, the issue is caused by package :

@angular/common @angular/router

Is this a regression?

Nope

Description

I have an injected service in two differents modules. One is lazy loaded, the other is not.

When I dump the value of my injected service, it has two different value.

🔬 Minimal Reproduction

https://github.com/rsaenen/lazy-service

1. Start and go to the app
2. Open the browser console
3. Click on SIGN.IN
4. Click on the mini-fab next to ‘Click here’
5. Click on the item menu ‘AND CLICK HERE’
6. Look at the browser console where AuthService is dumped by the two modules.

Here my console:

AuthService {jwtService: JwtService, router: Router, _login$: ReplaySubject, _jwtPayload: {…}}
  > jwtService: JwtService {_jwt: JwtHelper}
  > router: Router {rootComponentType: ƒ, urlSerializer: DefaultUrlSerializer, rootContexts: ChildrenOutletContexts, location: Location, config: Array(3), …}
  > _jwtPayload: {email: "[e-mail]", firstname: "firstname", lastname: "lastname", rights: Array(1), exp: 1564753764, …}
  > _login$: ReplaySubject {_isScalar: false, observers: Array(2), closed: false, isStopped: false, hasError: false, …}
  > jwtPayload: (...)
  > login$: (...)
  > token: (...)

AuthService {jwtService: JwtService, router: Router, _login$: ReplaySubject}
  > jwtService: JwtService {_jwt: JwtHelper}
  > router: Router {rootComponentType: ƒ, urlSerializer: DefaultUrlSerializer, rootContexts: ChildrenOutletContexts, location: Location, config: Array(3), …}
  > _login$: ReplaySubject {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
  > jwtPayload: (...)
  > login$: (...)
  > token: (...)

JwtPayload is undefined when it used by the lazy loaded module.

Note: If the AuthService is provided in root, it works.

🌍 Your Environment

Angular Version:

Angular CLI: 8.1.0
Node: 10.16.0
OS: linux x64
Angular: 8.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.801.0
@angular-devkit/build-angular      0.801.0
@angular-devkit/build-optimizer    0.801.0
@angular-devkit/build-webpack      0.801.0
@angular-devkit/core               8.1.0
@angular-devkit/schematics         8.1.0
@angular/cdk                       8.0.2
@angular/language-service          8.1.1
@angular/material                  8.0.2
@angular/material-moment-adapter   8.1.1
@ngtools/webpack                   8.1.0
@schematics/angular                8.1.0
@schematics/update                 0.801.0
rxjs                               6.4.0
typescript                         3.4.5
webpack   

Anything else relevant?

[rsaenen]

Thanks, I checked the documentation about lazy loading but I didn’t think that what I was looking for was in the singleton services.

I wonder about a good architecture with lots off lazy loaded modules, it appears that lazy load a module is a good pratice but gives you a lot of inconvenients like this one (and SSR for exemple).

I will look for an article “how to manage big angular app”.

[kapunahelewong]

I think @thefliik is correct since the reasoning behind it is due to the ModuleInjector tree. I have a small demo I made on this point a month ago (so it doesn’t exactly do what your demo does, but is related) that might help you: https://github.com/kapunahelewong/module-injector-tree

The root ModuleInjector will always serve as a fallback injector, even in the case of lazy loading. In my example, the lazy loaded module can get to the service that is providedIn root, but the AppModule can’t see the lazy module’s service. You’ll have to clone/download and serve it to see it clearly.

I have a PR in review right now that goes in-depth on the injector trees which might help, too: https://github.com/angular/angular/pull/28700. Here’s a preview of the Hierarchical Injectors page rewrite that might help if you prefer the rendered docs look: https://pr28700-bf33843.ngbuilds.io/guide/hierarchical-dependency-injection

The relevant part is the ModuleInjector stuff. If you have any questions on the explanation in there, please let me know.