This is a demo used as a proof of concept to build a micro-frontends architecture with Angular 11, Nx Workspace and Ngrx Store.
Please check the Medium article How to build a micro-frontends architecture, with Angular and Webpack Module Federation to get more context about this demo.
The demo is based on two apps:
- a counter-mfe micro-app with a Counter module, which provides a working counter feature with it's own
counterngrx store (state and actions), - a main shell app which provides the default home page, an authentication feature with it's own
authngrx store (state and action) from an auth lib.
Once authenticated on the shell app, it's possible to navigate to the counter feature and loads the remote Counter module from counter-mfe app.
Note: for a more basic demo, you might check MFE basic demo, with a step-by-step guide to create and configure a micro-frontend workspace.
Note 2: the initial workspace was created with Nx CLI.
npx create-nx-workspace@latest mfe-advanced-demo --preset="angular" --appName="shell" --style="scss"
ng g @nrwl/angular:app mfe1
You can access both apps here:
- counter-mfe http://mfe-demo-counter.s3-website.eu-west-3.amazonaws.com
- shell http://mfe-demo-shell.s3-website.eu-west-3.amazonaws.com
Run the counter-mfe micro-app and go to http://localhost:4300.
nx serve counter-mfe
Note: if you get Cannot find module 'ngx-build-plus/package.json', run npm i.
Run the shell main app and go to http://localhost:4200.
nx serve shell
Login and navigate to Counter MFE, which will load the Counter module from the counter-mfe micro-app.
