angularmicro-frontendwebpack-module-federation

NX MFE angular module federation not able to access remote micro front end


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

enter image description here

Please suggest what wrong i did here.


Solution

  • 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.

    IIS HTTP response header here

    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

    IIS mime types here

    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.