Repository files navigation

Multirepo Micro-Frontend Implementantion usingWeb Components.

• Angular Elements
• Custom Events

Angular Version 15.1.0

Web Components includes, currently three projects:

1. shell, the main project.
2. projectOne, the first microfrontend subProject.
3. projectTwo, the second microfrontend subProject.

In every app you should run:

npm install

Firstly, you should buildprojectOne 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 port8070. I use Python for this.

Also, you should buildprojectTwo 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 port8080. I use Python for this.

Then the next step is to go inshell folder and run this command:

npm start

ProjectOne exposesDashboard Component which includes a table.

ProjectTwo exposesForm Component which includes a form.

By entering data in form and clicking submit, the submited data stored inCustom Event. Then we can retrieve these data insideDashboardComponent withCustomer Event and show them inside the table.