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

Question

I have a shell and two MFE using NX module federation i.e.

agency(a) and
home(b).

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.

score 1 · Answer 1 · answered Apr 11 '23 at 14:05

So, it seems you already deployed your app, in which case you have to set the CORS headers in the server, something like nginx or apache. I don't know which stack you have in your backend but one example on how to set this header in nginx is the following: (Taken from Michiel Kalkmans blog)

This configuration allows POST and GET requests from any domain. Bear in mind this is just an example. You should configure the header Access-Control-Allow-Origin to only allow calls from the shell domain, like:

add_header 'Access-Control-Allow-Origin' 'https://myshelldomainhere.com';

#
# Wide-open CORS config for nginx
#
location / {
     if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        #
        # Om nom nom cookies
        #
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

        #
        # Custom headers and headers various browsers *should* be OK with but aren't
        #
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

        #
        # Tell client that this pre-flight info is valid for 20 days
        #
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;
        return 204;
     }
     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
     }
     if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
     }
}

Thanks for your help. but unfortunately it not solved mine. – Pranav MS Apr 11 '23 at 22:00 — Pranav MS, Apr 11 '23 at 22:00

Sinto Sunny · Accepted Answer · 2023-04-11T15:58:58.977

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.

Thank you. it worked for me like magic. I got stuck on this for past few days.. — Pranav MS, Apr 11 '23 at 20:19

score 1 · Answer 3 · answered May 19 '23 at 10:18

This case can be also if your NX mfe app has errors itself inside the app and while it was tried to build it didn't build properly, in this way you will have this error. Unfortunately, there is no way to catch external mfe apps' errors somehow...

The most popular error which generates this issue is nullInjectorError when you forgot to import some of the libs/services to the app.

How to solve:

try to build/serve mfe separately first and see if there will be any sort of errors like

npx nx serve your-app npx nx build your-app

be sure that you have aot enabled

This was not my issues. I resolved the issue by following above answer by @sinto appreciate your time and help. Thanks :) — Pranav MS, May 23 '23 at 15:00

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

3 Answers3

Linked