Repository navigation
Microfrontend support聽#17556
Description
馃殌 Feature request
Webpack 5 Module Federation API will be a game changer to the web.
So bringing support to Angular CLI once Webpack 5 is released and supported will also be a game changer to Angular projects using the CLI.
Command (mark with an x)
- new
- build
- serve
- test
- e2e
- generate
- add
- update
- lint
- xi18n
- run
- config
- help
- version
- doc
Description
Once Angular CLI support Webpack 5 #17555 it is important to also support its new API called Module Federation that allow sharing modules in runtime among applications.
Describe the solution you'd like
Support Webpack 5 Module Federation.
Describe alternatives you've considered
No alternative considered.
Activity
ScriptedAlchemy commentedon May 30, 2020
Let me know if there is any assistance needed on Module Federation
jpchavat commentedon Jul 1, 2020
Any news about Webpack 5 in the CLI?
felipeplets commentedon Jul 2, 2020
@jpchavat #17555 tracks specifically the support to WebPack 5, this issue is only related to Module Federation.
But I don't believe we will see support to WebPack 5 in Angular CLI before it is released. https://github.com/webpack/webpack/releases
ScriptedAlchemy commentedon Jul 12, 2020
Should we make progress towards it, perhaps on a pre-release branch. While maybe not a stable release to the public, I鈥檝e been working with other large projects who are working on the upgrade paths and if any issues are uncovered, we are able to address them at webpack ahead of the full release. Feedback from large projects is very valuable - W5 has been very stable.
naveedahmed1 commentedon Jul 22, 2020
Can anyone please share what specific impact and improvements it can bring in case of Angular applications?
BenRacicot commentedon Jul 30, 2020
I can weigh in here after being part of a POC for an Angular upgrade on a massive group of applications (which most of us probably use regularly).
Regarding module sharing, several contacts have confirmed that they are lazy-loading their feature modules by referencing their import statements. A huge list of them... (import mapping)
Here is a stackblitz example
When it comes to architecting shared modules federation is not trivial, it is the correct tool for the job. Now when you extend this architectural need to sharing ACROSS applications we require specific tooling for this, not just a "bag of tricks".
Additionally, the way WP5 "shares" packages across these modules is super pro.
For large-enormous projects WP5 is not a nice-to-have, it will be a difference-maker. I implore the Angular team to make this happen ASAP even asking the community for help if needed.
ScriptedAlchemy commentedon Aug 1, 2020
It stretches beyond angular apps to the JS ecosystem.
Attempts to split up applications but still share resources has always been cumbersome and clunky.
Angular apps would be able to scale beyond organization and deploy limitations. Since Angular is a framework, you're well positioned to leverage the new architecture for the best benefit of users.
Many large companies are crippled by scale issues and the overhead of trying to manually manage some form of organizational scalability around their codebases.
The capabilities that module federation brings to the table are an absolute must for any organization with a lot of code that wants to reduce management complexity and improve user experience while maintaining team autonomy.
I too am willing to help with the integration. It opens doors to build much bigger apps and the sharing mechanics is top tier.
The scale I typically with within is dozens to hundreds of teams or apps that all need to share or work together. Some of my largest systems I designed module Federation to cater towards have a header bar that consists of 15 separate teams with about 20 devs per team.
At any given point I can have 5-30 micro-frontends powering a given view.
The key point here is that module federation enables us to require code from independently deployed apps at runtime. And it's something we need
BenRacicot commentedon Aug 2, 2020
Zack, I'm glad we are having the same experience(s) architecting modules/components across apps @ScriptedAlchemy.
I hope this is not a debate but rather community interest in how engineers will utilize WP5's federation tools. That being said I must insist that small projects who setup for lazy-loading (without the router) are being forced to use import mapping, that is listing the paths and import statements for each module the app may lazy-load.
import mapping our modules is painfully antiquated and as Zack Jackson brought out it needs to be remedied for all JS usage. But here we bring our experience to the Angular community/team.
ydmitry commentedon Aug 18, 2020
Any news on branch or official fork with webpack 5 ?
alan-agius4 commentedon Aug 18, 2020
@clydin has been working on adding initial support for Webpack 5.
Unfortunately, supporting Webpack 5 is not a trivial feat as there are a lot of breaking changes that we need to address while still maintain comparability with Webpack 4.
ScriptedAlchemy commentedon Aug 23, 2020
Soon as a branch is up. Even broken, I can provide some guidance. I've upgraded several community projects to webpack 5 and have rewritten many plugins over the past several months.
Upgrading is complex. But we were able to do so with next js, through a lot of updating. Next still remains WP4 and WP5 compatible.
12 remaining items
ashimjk commentedon Mar 3, 2021
any update on this?
glebmachine commentedon Apr 4, 2021
Here is a few bugs, that will enable module federation:
#20428 (v12.0.0+)
#20429 (v11.0.3)
hardikpatel043 commentedon Apr 14, 2021
Any update? Can we please have ETA for this ?
dgp1130 commentedon Apr 29, 2021
We're starting some higher-level discussion to find the priority for this and what the right solution to this problem will look like. With Webpack 5 support in the CLI and the number of microfrontend talks at
ng-confthis year, we understand there is a lot of desire for an official Angular solution here.I would like to restructure the topic here to not be specific to Webpack 5 module federation, but rather about microfrontends as a use case. From our understanding, the desire here is to be able to deploy different parts of a single Angular application independently from one another and have them work together at runtime. Module federation is one possible way to solve that particular problem, but it could also be done other ways, and we don't want to rule them out. If you have other use cases beyond that, I recommend filing a separate issue so we can evaluate that use case more holistically.
[-]Webpack 5 Module Federation support[/-][+]Microfrontend support[/+]RoopanV commentedon Sep 19, 2022
Hi,
Do we have any update for Microfrontend support in Angular 15 or 16?
martinmcwhorter commentedon May 19, 2023
Prior Art: Manfred Steyer has created Native Federation, a builder/bundler agnostic implementation of Module Federation.
This implementation has NO dependency on Webpack.
https://www.angulararchitects.io/aktuelles/announcing-native-federation-1-0/
petereijgermans11 commentedon Jan 11, 2024
Please take a look at this issue:
I have an issue for Extra configuration possibilities for Native Module Federation with Angular.
Is it possible to implement the following feature in esbuild and in angular.json for 'Native Module Federation'?
At this moment I use Angular 17 with 'Webpack Module Federation' and I want to step over to 'Native Module Federation'.
In Angular with 'Webpack Module Federation' you have the configuration option in angular.json to define an extraWebpackConfig. Esbuild does not support such a configuration option.
Why do I need this option?
I want different configuration files for different tasks (e.g. build and serve, e2e).
It would be very useful for my installation for Native Module Federation in Angular 17 to have for example the configuration option: extraEsBuildConfig in angular.json