Angular 13 app, wrapped in web component DI {providedIn: 'root'} issue

[IanvanZyl636]

I followed your guide Multi-Framework and -Version Micro Frontends with Module Federation: Your 4 Steps Guide and got the following issue with the dependency injection of services and modules when wrapping my angular application in a web component. Added below is a blank application repo and video too showcase the issue.

I have a blank angular 13 application wrapped by a custom web component using @angular/elements. Here is the repo to the project

https://github.com/IanvanZyl636/Angular-13-web-component-issue

In this project, I have a lazy loaded test.module.ts with test.service.ts declared in its providers array. The test.service.ts is also providedIn: 'root'. I am trying to inject a token into the test.service.ts and change the token value within the lazy loaded test.module.ts.

TOKEN:

export const TESTERTOKEN = new InjectionToken('TESTERASDASDAS'); Change of value in test.module.ts:

{ provide:TESTERTOKEN, useValue:'a234234' } Injection into test.service.ts:

constructor(@Optional()@Inject(TESTERTOKEN) asd:string) { const pop = asd; } The problem

Here is a video visually explaining the issue: https://youtu.be/1mXAPIEc5uU

When the app is wrapped with a custom web component, the test.module.ts value change fails.

When I remove the custom web component the value change works

When I remove the providedIn: 'root' from the test.service.ts the value change works.

Solution I am after

I want the app to be wrapped with web component and the service to stay providedIn: 'root' where the value change is working within the lazy loaded module test.module.ts.

[huajian123]

@IanvanZyl636 May I ask how to solve it