I have a shell and two MFE using NX module federation i.e.
which is hosted in a different subdomains.
I have a problem while trying to access.
My module-federation.manifest.json
{
"agency": "https://a.abc.maindomain.com",
"home": "https://b.abc.maindomain.com",
}
main.ts
import { setRemoteDefinitions } from '@nrwl/angular/mf';
fetch('/assets/module-federation.manifest.json')
.then((res) => res.json())
.then((definitions) => setRemoteDefinitions(definitions))
.then(() => import('./bootstrap').catch((err) => console.error(err)));
The below is my console error
Please suggest what wrong i did here.
Even if you are deploying into subdomains it will treat as 2 domains So you need to setup the Cors enabler. If you are using IIS for deployment follow the below steps.
Step 1 :- FOR CORS
In this image you can see the HTTP Response header, add 'Access-Control-Allow-Origin': '*' for shell and remotes.
if you have 'Web.config' you can give values in that file.
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Methods" value="*" />
<add name="Access-Control-Allow-Headers" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>
Step 2 :- ERR_FAILED 404
In your screenshot remoteEntry extension is not .js it is .mjs So may be the server doesn't have this extension so just add this extension in the server MIME types (for both shell and remotes). refer the below image
Or you can also add this configuration into the web.config
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".mjs" mimeType="text/javascript" />
</staticContent>
</system.webServer>
</configuration>
Step 3 :- Restart the server.
Try this , It worked in my case.