Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
2 tasks done
alexUXUI opened this issue Sep 28, 2024 · 9 comments
Open
2 tasks done

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

alexUXUI opened this issue Sep 28, 2024 · 9 comments

Comments

@alexUXUI
Copy link

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

  • Read the Contributing Guidelines.
  • Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
@ScriptedAlchemy
Copy link
Member

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
Copy link
Member

ScriptedAlchemy commented Sep 28, 2024

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
Copy link
Contributor

Coly010 commented Sep 29, 2024

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
Copy link
Member

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
Copy link
Contributor

Coly010 commented Sep 30, 2024

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

@ScriptedAlchemy
Copy link
Member

someone shipped a example with federation/vite package. I have not tried it tho

Copy link
Contributor

Stale issue message

@zackarychapple
Copy link
Collaborator

@swalker326 want to post the link to your example?

@swalker326
Copy link
Contributor

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants