This project is just to demonstrate microfront end architecture using Tailor
Applications used:
- Portal - Tailor
- Child App 1 - Angular (v7 - 7.0.4)
- Child App 2 - Angular (v7 - 7.0.4)
- Child App 3 - Angular (v6 - 6.1.10)
- Child App 4 - Angular (v6 - 6.1.10)
How To Use:
- Clone the project from Tailor Multiple Angular POC
- Run
npm install
in main folder. - Go to child-apps folder and run
npm install
inside each angular apps - Come back to main portal folder and run below commands in different terminals.
npm run start
- It will start the main application inhttp://localhost:9090
npm run start-fragments
- It will start individual applications as fragments inhttp://localhost:5050
,http://localhost:5051
,http://localhost:5052
,http://localhost:5053
respectively
Known Issues:
- Unable to render two individual angular applications with same versions(ng build) in a same window because of some global scope conflicts (It loads only one application which loads first)
- Unble to render multiple version of angular apps(webpack build - refer webpack.config.js inside child apps) with (v7 - Lazy loaded Module) and (v6 - Lazy loaded Module) Lazy Load Error
- Angular application works well with custom webpack config(webpack.config) and default angular config(angular.json) as well in JIT (V6) but (v7) have some conflicts with
@ngtools/webpack
,
But at the same time following scenarios are working fine:
-
Able to render two angular applications with same versions in a same window (webpack build - refer webpack.config.js inside child apps)
-
Able to render two angular applications(v7) with lazy loaded modules.
<fragment src="http://localhost:5050"></fragment> <fragment src="http://localhost:5051" ></fragment>
-
Able to render two angular applications(v6) with lazy loaded modules.
<fragment src="http://localhost:5052"></fragment> <fragment src="http://localhost:5053" ></fragment>
-
Able to render multiple version of angular apps with (v7 - Lazy loaded Module) and (v6 - Normal Modules)
-
Comment the fragment urls in index.html respectively and run
npm start
to check the above scenarios.