this post was submitted on 13 Sep 2023
3 points (100.0% liked)

Angular

270 readers
2 users here now

A community for discussion about angular

Wormhole

[email protected]

Logo base by Angular under CC BY 4.0 with modifications to add a gradient and drop shadow

founded 1 year ago
MODERATORS
 

Does anyone have experience with breaking apart a large Angular frontend into micro frontends? Any advice you can offer or resources you can point me to would be greatly appreciated. Ideally I'd like to be able to mix Angular versions and different technologies (e.g. React) in the future as well, assuming that's possible.

you are viewing a single comment's thread
view the rest of the comments
[โ€“] [email protected] 2 points 1 year ago (1 children)

There are several ways to achieve this. Also, "microfrontend" can mean many things. It's usually referred to the architecture in which you can deploy an app shell, and other people or teams (or even companies) deploy their own, and you can include parts of their remote-deployed things into your live app. Look into Webpack 5 and Federated Modules for this. Look also into things like Single SPA. OR maybe Piral. There are other ways out there as well, but I haven't tried them or they would not mix easily with Angular.

Then perhaps you mean deploy-time or build-time integration. From simple monorepos like nx.dev or workspace-like things, to even straight-forward publishing every module on npm. You can pack Angular Standalone Components into a package without issues. But even if you have older Angular versions like you mention, you can export web-component-like components and push them into a (private) npm namespace, and assemble on build time. And the same on react.

Then there are things like Astro, mentioned bellow, which kind of mix both of these ideas, and many more.

Your question is quite broad. If you have specific requirements, e.g. "I have a repo with two components, an angular app, two react apps in these versions, and I want to achieve X", you may get specific recommendations, so fire away, ask questions.

[โ€“] TheGiantKorean 1 points 1 year ago

Thank you for the suggestions and bringing up considerations! We've been looking at build-time integration thus far, but some of the other options mentioned sound really interesting.

If I had to get more specific, we've got 3 components with many more on the way, and I'd like to choose a micro frontend option that doesn't lock us into a particular technology in case we decide to start using something like React or Vue as well.