Module Federation Example by Angular Experts (WIP)

Follow us @tomastrajan, @kreuzercode, AngularExperts.io

Get started

• npm ci
• npm start

Perf

• add "buildLibsFromSource": false, to the project.json of apps (host + remotes), else the @nx/angular:webpack-browser builder won't benefit from buildable libraries

1. Buildable libs

• host and remotes with correct builders ( generated out of the box by NX )
  • build - @nx/angular:webpack-browser, with "buildLibsFromSource": false, (needs to be added manually)
  • serve
    • host @nx/angular:module-federation-dev-server
    • remote @nx/angular:webpack-server
• are cached by default

Build

Better perf than Angular CLI, because only the changed libs are built (not the whole app)

Serve

• better initial build perf than Angular CLI, because only the changed libs are built (not the whole app)
• same perf as Angular CLI for rebuilds

2. Module federation / Remotes

• compared to Angular CLI, no need to build "whole" app (build / first build of serve) but only a part (eg remote === lazy loaded feature)
• so building / serving smaller amount of code will always be faster

Observations

• buildable libs do NOT help (are worse than non-buildable) when using @angular-devkit/build-angular:browser builder for host and remotes
  • the buildable libs need to be built (takes time)
  • then they are ignored and whole thing is build through the consumer app (host / remote) with @angular-devkit/build-angular:browser builder
• buildable libs DO help when using @nx/angular:webpack-browser builder, WITH "buildLibsFromSource": false,
• serving with @nx/web:file-server docs is order of magnitude WORSE than serving with @nx/angular:webpack-server (generated)

⚠️ Unresolved problems ⚠️

• (Win 11 / WSL 2) Using "buildLibsFromSource": false, seems to break live reload, only reloads for the first change
  • start the remote with npm run serve:remote-a
  • change libs/remote-a/feature/asrc/lib/remote-a-feature-a/remote-a-feature-a.component.ts, will be reflected in the browser
  • another change to the same file, will not be reflected in the browser
  • workaround, remove "buildLibsFromSource": false, from project.json of host and remotes

TODOs

Contribute to this project by picking up one of the following TODOs.