Angular + web components + shared service

[Nicolas Galmiche]

Hello,

Here's my current setup:

• Angular 17.1.0 app (shell)
• Angular 17.3.3 (remote)
• Angular lib with one service

As my shell and remote do not use the same Angular version, i had, if I have correctly understood the documentation, wrap my remote into a web component.

Now I'd like to make the shell and the remote use the same instance of my Angular lib. I added it to my shared libs like this:

(Shell)

(Remote)

I also set "providedIn: root" to the shared service.

It still doesn't seem to work as I can see the service's constructor called twice when I load the page.

So my question is: is it even feasible ? Sharing an Angular service when the remote is a web component ? Does it only work if the remote and the shell share the same version and therefore the remote can "simply" be lazy-loaded like any other Angular module ?

Thanks

[Manfred Steyer]

In this scenario, you cannot share a service because each Angular app has its own injector tree. But you could share a plain javascript object, sth like

export const sharedObject = { x: 1, y: 2 };