Microfrontend support

[felipeplets]

🚀 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.

[ScriptedAlchemy]

Let me know if there is any assistance needed on Module Federation

[jpchavat]

Any news about Webpack 5 in the CLI?

[felipeplets]

@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]

Should we make progress towards it, perhaps on a pre-release branch. While maybe not a stable release to the public, I’ve 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]

Can anyone please share what specific impact and improvements it can bring in case of Angular applications?

[BenRacicot]

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]

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]

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]

Any news on branch or official fork with webpack 5 ?

[alan-agius4]

@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.