This is a example repository for people who want to have multiple angular microfrontends coexist within a single page. Each of the angular applications was created and is managed by Angular CLI.

It uses single-spa to pull this off, which means that you can even add React, Vue, or other frameworks as additional microfrontends.

For mapping routes to applications it uses single-spa-layout.

This github repository has four projects all in one repo. But when you do this yourself, you'll want to have one git repo per angular application. The root-html-file project should also be in its own repo. This is what lets different teams and developers be in charge of different microfrontends.

With single-spa, it is preferred to run ng serve in only one single-spa application at a time, while using a deployed version of the other applications. This makes for an awesome developer experience where you can boot up just one microfrontend at a time, not even having to clone, npm install, or boot up all of the other ones.

To try this out, clone the repo and run the following commands:

cd app1 npm i npm start

## Local development -- all at once
It is preferred to only run one app at a time. But if you need to run them all locally, you can do so with the following instructions


# First terminal tab
cd root-html-file
npm install
npm start

cd app1 npm install npm start

# Third terminal tab
cd app2
npm install
npm start

cd navbar npm install npm start

Now go to http://localhost:4200 in a browser. Note that you can change any of the ports for the projects by modifying the Import Map inside of
root-html-file/index.html.

http://localhost:4200

http://localhost:4200/app1

http://localhost:4200/app2