Search code examples
angulardockermime

How to fix server responded with a MIME type of "text/plain"?


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:

enter image description here

When inspecting network, remoteEntry.mjs is loaded: enter image description here

I am able to open and examine it:

enter image description here

Also, i tried changing my registry HKEY_CLASSES_ROOT.js\Content 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:

enter image description here


Solution

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

    events{}
    http {
        include mime.types;
        server {
            listen 80;
            server_name localhost;
            root /usr/share/nginx/html;
            index index.html;
        add_header Access-Control-Allow-Origin *;
        types 
            {
                 text/html                                        html htm shtml;
        text/css                                         css scss;
        text/xml                                         xml;
        image/gif                                        gif;
        image/jpeg                                       jpeg jpg;
        application/javascript                           js mjs;
        application/atom+xml                             atom;
        application/rss+xml                              rss;
    
        text/mathml                                      mml;
        text/plain                                       txt;
        text/vnd.sun.j2me.app-descriptor                 jad;
        text/vnd.wap.wml                                 wml;
        text/x-component                                 htc;
    
        image/avif                                       avif;
        image/png                                        png;
        image/svg+xml                                    svg svgz;
        image/tiff                                       tif tiff;
        image/vnd.wap.wbmp                               wbmp;
        image/webp                                       webp;
        image/x-icon                                     ico;
        image/x-jng                                      jng;
        image/x-ms-bmp                                   bmp;
    
        font/woff                                        woff;
        font/woff2                                       woff2;
    
        application/java-archive                         jar war ear;
        application/json                                 json;
        application/mac-binhex40                         hqx;
        application/msword                               doc;
        application/pdf                                  pdf;
        application/postscript                           ps eps ai;
        application/rtf                                  rtf;
        application/vnd.apple.mpegurl                    m3u8;
        application/vnd.google-earth.kml+xml             kml;
        application/vnd.google-earth.kmz                 kmz;
        application/vnd.ms-excel                         xls;
        application/vnd.ms-fontobject                    eot;
        application/vnd.ms-powerpoint                    ppt;
        application/vnd.oasis.opendocument.graphics      odg;
        application/vnd.oasis.opendocument.presentation  odp;
        application/vnd.oasis.opendocument.spreadsheet   ods;
        application/vnd.oasis.opendocument.text          odt;
        application/vnd.openxmlformats-officedocument.presentationml.presentation
                                                         pptx;
        application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
                                                         xlsx;
        application/vnd.openxmlformats-officedocument.wordprocessingml.document
                                                         docx;
        application/vnd.wap.wmlc                         wmlc;
        application/wasm                                 wasm;
        application/x-7z-compressed                      7z;
        application/x-cocoa                              cco;
        application/x-java-archive-diff                  jardiff;
        application/x-java-jnlp-file                     jnlp;
        application/x-makeself                           run;
        application/x-perl                               pl pm;
        application/x-pilot                              prc pdb;
        application/x-rar-compressed                     rar;
        application/x-redhat-package-manager             rpm;
        application/x-sea                                sea;
        application/x-shockwave-flash                    swf;
        application/x-stuffit                            sit;
        application/x-tcl                                tcl tk;
        application/x-x509-ca-cert                       der pem crt;
        application/x-xpinstall                          xpi;
        application/xhtml+xml                            xhtml;
        application/xspf+xml                             xspf;
        application/zip                                  zip;
    
        application/octet-stream                         bin exe dll;
        application/octet-stream                         deb;
        application/octet-stream                         dmg;
        application/octet-stream                         iso img;
        application/octet-stream                         msi msp msm;
    
        audio/midi                                       mid midi kar;
        audio/mpeg                                       mp3;
        audio/ogg                                        ogg;
        audio/x-m4a                                      m4a;
        audio/x-realaudio                                ra;
    
        video/3gpp                                       3gpp 3gp;
        video/mp2t                                       ts;
        video/mp4                                        mp4;
        video/mpeg                                       mpeg mpg;
        video/quicktime                                  mov;
        video/webm                                       webm;
        video/x-flv                                      flv;
        video/x-m4v                                      m4v;
        video/x-mng                                      mng;
        video/x-ms-asf                                   asx asf;
        video/x-ms-wmv                                   wmv;
        video/x-msvideo                                  avi;
            }
            location / {
                try_files $uri $uri/ /index.html;
            }
        }
    }