Multirepo Micro-Frontend Implementantion using Web Components.
- Angular Elements
- Custom Events
Angular Version 15.1.0
Web Components includes, currently three projects:
- shell, the main project.
- projectOne, the first microfrontend subProject.
- projectTwo, the second microfrontend subProject.
In every app you should run:
npm install
Firstly, you should build projectOne with this command:
npm run bundle
This command will create a .js file of projectOne.
The next step is to run project-one.js (dist folder) in a local server with port 8070. I use Python for this.
Also, you should build projectTwo with this command:
npm run bundle
This command will create a .js file of projectTwo.
The next step is to run project-two.js (dist folder) in a local server with port 8080. I use Python for this.
Then the next step is to go in shell folder and run this command:
npm start
ProjectOne exposes Dashboard Component which includes a table.
ProjectTwo exposes Form Component which includes a form.
By entering data in form and clicking submit, the submited data stored in Custom Event. Then we can retrieve these data inside DashboardComponent with Customer Event and show them inside the table.