Yes, it should be possible. I'd be cautious with doing this over major versions; as you're pulling in the remote app into the context of the host. One of the many benefits of micro frontends and module federation, is that you can pull in different frameworks, versions, etc.; so that you can independently manage slices of your application and update and deploy those changes.
If your two Angular applications are using Angular Elements, you may need to share the PlatformRef between these (via the window global). There's a great walkthrough of this in the link at the top of this article.
Shellshared configured with @angular/* singleton: true Remoteshared configured with @angular/* singleton: false
When Shell injects Remote with loadRemoteModule lazy routing; node_modules_angular_core___ivy_ngcc___fesm2015_core_js (Angular 12.0.5 chunk from Remote) JS file is added from Remote. This immediately fires a run-time error: Error: inject() must be called from an injection context. From what I have found, the error is caused by two Angular instances running concurrently.
If I updated shared configured with Shellshared configured with @angular/* singleton: true Remoteshared configured with @angular/* singleton: true
The Remote; is lazy loaded successfully, loaded on <router-outlet> but Remote module is rendered from the single @angular/core instance from Shell. Not ideal.
I have multiple micro-frontends running on a single Shell instance. I won't be able to necessarily keep all micro-frontends up to date with latest Angular, and Shell instance might move ahead in versions. Thought module federation would have some solutions.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Is it possible running two versions of Angular on the same page? One for Host and a different version for Remotes?
Yes, it should be possible. I'd be cautious with doing this over major versions; as you're pulling in the remote app into the context of the host. One of the many benefits of micro frontends and module federation, is that you can pull in different frameworks, versions, etc.; so that you can independently manage slices of your application and update and deploy those changes.
If your two Angular applications are using Angular Elements, you may need to share the
PlatformRefbetween these (via the window global). There's a great walkthrough of this in the link at the top of this article.Hi Sean
Thank you for the response!
I'm currently testing with:
Shell
sharedconfigured with @angular/*singleton: trueRemote
sharedconfigured with @angular/*singleton: falseWhen Shell injects Remote with
loadRemoteModulelazy routing;node_modules_angular_core___ivy_ngcc___fesm2015_core_js (Angular 12.0.5 chunk from Remote)JS file is added from Remote. This immediately fires a run-time error:Error: inject() must be called from an injection context. From what I have found, the error is caused by two Angular instances running concurrently.If I updated shared configured with
Shell
sharedconfigured with @angular/*singleton: trueRemote
sharedconfigured with @angular/*singleton: trueThe Remote; is lazy loaded successfully, loaded on
<router-outlet>but Remote module is rendered from the single @angular/core instance from Shell. Not ideal.I have multiple micro-frontends running on a single Shell instance. I won't be able to necessarily keep all micro-frontends up to date with latest Angular, and Shell instance might move ahead in versions. Thought module federation would have some solutions.