[Docs] @module-federation/enhanced + Angular example

[alexUXUI]

Clear and concise description of the problem

As a dev using @module-federation/enhanced, I would love an example repo showing the set up I need to use @module-federation/enhanced in my angular projects.

Currently, I am following the truly wonderful documentation page on angular and mf enhanced.

It is a fantastic resource and I am loving all the new documentation sites.

I notice there is one step missing from this page that is on the previous example here, which is adding the bootstrap.ts async boundary.

I think maybe there could be some other steps missing because I cannot seem to follow the guide and make it work on my own.

Suggested solution

One idea we could collaborate on is:

1. Build an example of using Angular and @module-federation/enhanced in the MF Examples repo, based on the guide in the doc site
2. Update the doc site with a link to the example, somewhere near the top or bottom of the page

Alternative

One alternative approach could be:

Update the documentation page with the complete source code needed, using collapsable blocks of content to prevent the documentation from becoming too verbose.

Additional context

I am so deeply appreciative of all the OSS work the Byte infra and MF teams do.

Thank you so much for your consideration and support on this request.

If there is interest in this request, I would love to help however I can, just need some guidance on properly configuring @module-federation/enhanced + Angular.

Validations

• [X] Read the Contributing Guidelines.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[ScriptedAlchemy]

Hey Alex. This angular example is likely quite old, since it was backported from v1 federation doc site and since then angular has largely gone off into the esbuild tooling ecosystem.

What i would suggest is we loop in @zackarychapple and @Coly010 who both have vastly more experience in angular + federaiton. I know @Coly010 just got angular builds working with rspack, and NX team most likely knows how what needs to be done in modern angular etc, and of course would love an update the information on this page as well.

[ScriptedAlchemy]

The import bootstrap should no longer be needed if you set experiments.federationRuntime = hoisted on the plugin. https://module-federation.io/configure/experiments.html - this feature was added last week i think.

That said we should include it in the docs like it is elsewhere

[Coly010]

Just do

1. npx create-nx-workspace acme select none and integrated repo
2. cd acme then npx nx add @nx/angular
3. npx nx g @nx/angular:host shell —remotes=remote1,remote2

And you’ll have an Angular MF setup using @module-federation/enhanced. It’ll still be Webpack for now until I get https://github.com/coly010/ng-rspack-build more stable

[ScriptedAlchemy]

thats fine, as long as he has a angular + federation v2 reference. Where could he see the ejected configs if he needs to for instance if he not in nx already and has debt repo that needs manual implementation - where could he go to see how you apply the plugin, what you share be default etc for angular to actuallty work?

[Coly010]

Here: https://github.com/nrwl/nx/blob/master/packages/angular/src/utils/mf/with-module-federation.ts

But it's not so simple when it comes to the shared packages.

We use the Nx project graph to figure out the packages that need to be shared and the version at which to share them.

General rule of thumb if doing it manually with Angular is to share all angular runtime packages that exist in the package.json, including any secondary entrypoints, at the version currently installed.

use npm ls @angular/core to find the actual installed version, or dig through your lock file. Then these packages at the very least need to be shared:

@angular/animations
@angular/core
@angular/common
@angular/common/http
@angular/localize
@angular/platform-browser
zone.js