I have a frontend app that is using module federation architecture. It contains one shell application and 3 micro-frontends. I built container for each of these 4 apps. When I run these containers and go to chrome, open my shell it works just fine. I then try to navigate to any of the other applications via my navbar but I get the following errors:
When inspecting network, remoteEntry.mjs is loaded:
I am able to open and examine it:
Also, i tried changing my registry HKEY_CLASSES_ROOT.jsContent Type to text/javascript but it didn’t seem to work.
Any help would be much appreciated as am new to the module federation architecture as well as dockers.
Edit: I am using Nginx server with this config:
events{}
http {
include /etc/nginx/mime.types;
server {
listen 80;
add_header Access-Control-Allow-Origin *;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
}
Here is my Dockerfile for one of the micro-frontends:
FROM node:latest as node
WORKDIR /app
COPY . .
RUN npm install -g @nrwl/cli
RUN npm install --force
RUN npx nx build graphs --configuration=production
#stage 2
FROM nginx:alpine
COPY ./apps/graphs/nginx.conf /etc/nginx/nginx.conf
COPY --from=node app/dist/apps/graphs /usr/share/nginx/html
Edit: I tried adding
types
{
application/javascript mjs;
}
to my nginx config, but now i get this:
2
Answers
Try to add the line
in the file /etc/nginx/mime.types;
Inside Angular NX Module Federation, fixed it by changing nginx config file inside every microfrontends. That fixes MIME and CORS errors.
MIME:
types { ... }CORS:
add_header Access-Control-Allow-Origin *;inside server{}This is nginx config file: