Angular6 micro front-ends routing

Question

I have angular 6 micro front end application. It's having 4 different applications inside Main application. And how do i implement routing between those applications.And how do i implement routing in Main application (i have many child routes in Main application) and Sub applications too. I am using "@angular/elements". Please find my code in this this repository https://github.com/nagaraju123/microfrontend

Answer 1

Routing for a "true" microfrontend architecture should follow:

• Each microfrontend is a separate service in your infrastructure
• You have an ingress/reverse proxy in front of these services that allows routing to a specific service based on path
• You have a single domain name: app.yoursite.com
• You configure the ingress to route to the correct microfrontend based on path (e.g. /namespace/accounting goes to the accounting frontend)
• The microfrontends themselves control how they make requests (e.g. the accounting frontend serves some accountingPage.js, and code within that page will make all fetch requests with prefix: /namespace/accounting)

Summary:
It really depends on what you mean by "microfrontend" though. Often when people say microfrontend, they refer to creating separate JS bundles, but still sharing a single backend.

A "true" microfrontend architecture achieves total encapsulation of both the static assets/javascript and the backend/request handlers. Separation of concerns, not separation of technologies. Code served by one microfrontend is totally isolated from code served by another... stitched together by a common "platform" service.