Deploying a Micro Frontend including referenced assets to a certain origin is challenging.
As long as the hosting HTML page is located in same path/origin, everything works as expected. This changes if one loads the Micro Frontend script bundle from a different origin.
As the HTML page defines the Base-HREF the Micro Frontend, which is deployed to a different origin, tries to find the assets referenced with a relative path at the host page's origin. This leads to errors loading the assets.
There are possible solutions on how to fix this behavior:
- Base-HREF and Deploy-URL
- Using absolute path definitions including origin
- Inline assets by using a Base64 Data-URL
- Replacing path definitions with TypeScript- and CSS-variables
- Copy assets from Micro Frontend origin to host page origin
- Loading a CSS-file with relative path definitions directly in the hosting page
- Assign Micro Frontend origin to the TypeScript- and CSS-variables
- Use a proxy configuration to serve the Micro Frontend's assets from the host's origin
Shell with Micro Frontend | Micro Frontend directly |
---|---|
![]() |
![]() |
- Relative path in Angular Component's CSS file
- Relative path in Angular's App CSS file, that is bundled to styles.ts
- Relative path in Angular Template