Disclaimer:
This is project is for education purpose only and was made to illustrate example of building microfrontend using Angular, Module Federation.
There is 1 host (shell) and 3 remote apps (watch-app, likes-app, history-app). Each app is deployed to different hosting storage.
There are 3 versions of source codes available:
Turborepo (Current Repo)
Nx
Lerna
NOTE:
Server side rendering is implemented only on Lerna and Turborepo edition
☑ Multiple Angular applications on different domains
☑ Shared UI components and utils
☑ NgRx Store state management on each application
☑ Communication between angular applications
☑ Routing between applications
☑ Server Side Rendering
My mission is to make complex microfrontend app as much as possible to have many cases for developers.
NOTE:
Hosted application is using Turborepo edition repo
Since workspaces are available from npm v7, you should have NodeJs 16+ installed.
1- Install turbo globally:
npm install [email protected] -g
2- On root project install dependencies:
npm install
3- Start project and navigate to localhost:4200:
npm run serve
Other commands: please see package.json
for other commands.
NOTE:
In case of error that components are not exported from youtube/common-ui, on project root run command npm run clean:cache
and then npm run serve
Below are just my experiences working in those tools. They can be inaccurate.
✅ Supports both same and different versions of libraries (such as Angular, RxJs)
✅ Native - Use Angular CLI
❌ Configuration of applications required a change to angular.json
to make it work. Switched to ngx-build-plus
builders to support custom webpack config.
❌ Slow development efficiency. Rebuild everytime you make changes to common packages such as UI
❌ No dependency graph
❌ Not supports both same and different versions of libraries (such as Angular, RxJs). Only Monorepo.
❌ Not native. Uses Nx CLI
❌ Configuration of applications required a change to angular.json
to make it work. Switched to Nx Officially Supported Builders to support custom webpack config.
Problems with adding new packages (such as ssr)
✅ Very fast development efficiency
✅ Powerful dependency graph
❌ Not supports both same and different versions of libraries (such as Angular, RxJs). Only Monorepo.
✅ Native - Use Angular CLI
❌ Configuration of applications required a change to angular.json
to make it work. Switched to ngx-build-plus
builders to support custom webpack config.
✅ Fast development efficiency
✅ Dependency graph
To upgrade angular applications. Example:
On root:
npx @angular/cli@13 update @angular/core@13 @angular/cli@13 --force
On each remote app:
npx update @angular/core@13 --migrate-only --from=13 --to=13
Currently, the unit tests were not aded since the project was focused on main features such as module federation, managing state, intercommucation and so on. It can be started soon.
- Add I18n translations
- Add secondary entry points for common-ui
Want to contribute to improve community app? Looking forward for pull requests. Let's get started :)
Found repo useful? :) Let's star it ⭐
Book: https://www.angulararchitects.io/en/book/
My blog: https://medium.com/p/258f331bc11e
Big thanks to https://github.com/manfredsteyer for his contribution for a lot of useful blogs + book for building microfrontend.
Xtreme Junior Front end developer focused on nice architecture and long term webapps.