Angular 18 Microfrontend Project – Slow Rebuilds & Compilation During Development (Shared...

I'm working on a large-scale Angular 18 microfrontend project composed of three separate repositories, and development performance is becoming a serious bottleneck. While the deployed app runs smoothly, development rebuild times are significantly slowing down productivity.

Project Setup:

Shared Angular Component Library

Runs with:

# Internally does:
# ng cache clean && npm run build
# cd dist/some-lib/some-lib-elements
# npm link
# cd ../../
# npm run watch


Shell Application (Microfrontend host) and Remote App (Microfrontend remote)

Run with:

# Internally:
# ng cache clean && npm link @some-lib/some-lib-elements && ng serve


I am using Native Federation, and the shared library is linked into the shell and remote apps.

The Problem:

Every time I update a shared component

• The shared library rebuilds.
• The shell and remote apps must rebuild and restart.

Not only this, even making a small change in only a remote app, it rebuilds and take a minute to rebuild

This process takes a lot of time — sometimes several minutes — even for small changes. This pain point is amplified by the size of the project, number of shared components, and the inter-repo linking.

What are some best practices or strategies to speed up development in this kind of multi-repo Angular 18 setup? I can share the required files if requested. Any suggestions or experience from similar setups would be greatly appreciated!

Continue reading...