/module-federation-with-many-angular-versions

Run many Angular apps as Web Components in an Angular 14 shell. The apps use Angular 12, 13, and 14.

Primary LanguageTypeScript

module-federation-with-many-angular-versions

Following this guide, it should be possible to load Angular apps as Web Components into a shell app, using Module Federation:

https://www.angulararchitects.io/en/aktuelles/multi-framework-and-version-micro-frontends-with-module-federation-your-4-steps-guide/

Like that we can load e.g. an Angular 12 Micro Frontend into an Angular 14 shell.

However, there are still some issues:

  • ng13 MF does not work in ng14 shell
  • ng14 MR does not work properly in an ng14 shell

I created this repo in the hope to fix the issues.

Getting started

  • npm install in all folders: "shell", "ng-12-mf"...
  • Start all apps: Open the folders in separate terminals and run ng serve -o

The shell app and the Micro Frontends ("ng-12-mf" etc) will open in the browser:

Shell:

image

The Micro Frontends look like this:

image

Shell

Let's see the Micro Frontends in Action in the shell app:

Angular 12 Micro Frontend

Navigate to Angular 12: Everything looks great and as expected

image

Angular 13 Micro Frontend

Navigate to Angular 13: Oh nooo! We see an error: TypeError: m[e].get is not a function and the Micro Frontend is not displayed:

image

Angular 14 Micro Frontend

Navigate to Angular 14: Oh nooo! We see an error: Error: Uncaught (in promise): Error: NG04002, but the Micro Frontend is displayed:

image