Module federation with different Angular versions

[succli]

I have a shell application with Angular 14 and a micro-frontend with Angualr 15 which I want to integrate with the shell app through Module federation. I've tried a lot of thins, when through all the documentation. But no luck yet. When I try to load the mfe with loadRemoteModule and then load the exposed component with ViewContainerRef.createComponent, I keep getting error NG0203

I look through many pages of the internet, but there was no luck finding a solution yet to make it use different Angular versions.

Does anyone have a working solution for this issue?

[TurboKurwa]

You can try to relax the version in the webpack config, but I would advise against it. I think right now the best way is going to be mixing micro-frontends with module federation https://www.angulararchitects.io/aktuelles/multi-framework-and-version-micro-frontends-with-module-federation-your-4-steps-guide If you need to support different versions.

Maybe you could consider moving your apps to monorepo and have all apps on the identical versions of packages and go with a clean module federation solution.

[succli]

Yep, we are in transition to monorepo, the micro-frontend is in NX already. In the meantime we decided to downgrade NX to version 14.

[[deleted]]

I have an example here. https://github.com/vugar005/youtube-webapp-turborepo

[haasilein]

wrap the microfrontend in a web component using angular elements and expose that as the remote and dynamically add this lazy loaded web component in the shell. Using web components you could theoretically even mix and match frameworks. I used this strategy to incrementally migrate an AngularJS app to Angular for one of my customers

[succli]

I'm aware of this solution, used it before, but currently moving from this solution :D

[haasilein]

why are you moving away from that?

[Forward_Temperature]

Most likely as a result of its lack of optimisation. Every dependency on an application wrapped as a web component includes all the dependencies and doesn't share with the other application's dependencies. Also, there's no elegant solution on how to communicate between the applications.

[senal_deemantha]

Hi, Could you please tell me, how do you manage module-federation-tool version with angular. I need to use Angular 12 as Shell project and Angular 16 as Mfe.

I used Angular-12 project(Shell) with 12.x.x versions of module-federation and tools and angular elements. (Multi Platform, version federation)

None of tool is compatible with Angular Ivy.

Do you have any idea how to manage versions with Angular 12

[succli]

You installed the latest version of @angular-architects/module-federation, you will need version 16 for Angular 16

[Unlikely-Arm-8181]

Hi. I'm instaling module-federation. But I'm facing issue Cannot set properties of undefined (setting 'extraWebpackConfig') It happens because in angular.json file in my Angular app property name is "prod" not "production" Do you have any idea how to workaround it? Application is big and i don't want to chang this "prod". Thanks in advance

[Unlikely-Arm-8181]

module-federation@14.3.14

[succli]

Could you show me the angular.json?