mime.types is not used for javascript and css files for angular 8 application(dockerized with nginx:alpine)

Question

I have a multi stage docker image for my angular app which uses the nginx:alpine base image. I have the following nginx config and VHOST setup files(inside the docker container).

/etc/nginx/nginx.conf
/etc/nginx/conf.d/default.conf

My project files are under

/usr/share/nginx/html

Below are my configurations:

1. default.conf

server {
    listen 0.0.0.0:80;
    listen [::]:80;
    default_type application/octet-stream;

    gzip                    on;
    gzip_comp_level         6;
    gzip_vary               on;
    gzip_min_length         1000;
    gzip_proxied            any;
    gzip_types              text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_buffers            16 8k;
    client_max_body_size    256M;

    root /usr/share/nginx/html;


    location / {
        try_files $uri $uri/ /index.html =404;
    }
}

2. nginx.conf

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

As you can see, the mime.types file is already included and this file is present in the given path.

When i run this application, I get the following error in the browser(for the css and javascript files that are loaded):

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

I tried many combinations suggested in the forums but no luck. Please let me know if you have a solution hint.

Are you sure that the file exists? A non-existent file would be replaced by index.html which explains the MIME type in the error message. — Richard Smith
– Richard Smith, Commented Dec 3, 2019 at 10:58
mime.types file is there. I have verified this through the interactive shell of the docker container. Also if i give a non existent file the container doesn't start and gives error. — Sunil Kpmbl
– Sunil Kpmbl, Commented Dec 3, 2019 at 11:03
I was referring to the JS file that is causing the error. You will not see a 404 for file not found as your configuration always returns index.html for non-existent files. — Richard Smith
– Richard Smith, Commented Dec 3, 2019 at 11:04
That was a great hint! I have verified the /usr/share/nginx/ folder and the files are there. But somehow my context path is missed in the request which leads to 404 and redirection as you mentioned. I guess I can fix that. Thanks Richard! Please write it up as answer and I will vote for it. — Sunil Kpmbl
– Sunil Kpmbl, Commented Dec 3, 2019 at 11:14

user11593453 · Accepted Answer · 2020-01-23 20:46:47Z

16

There are several related issues on Github, see this one for a complete overview of the situation.

Basically, Angular 8 builder attributes a "module" tag to the scripts elements in dist/index.html (or whatever your compiler output folder is). This is not supported by Nginx MIME default config. Here's what you should add to your nginx.config.

http {
    types {
      module js;
    }
    include       /etc/nginx/mime.types;
    # rest of your config...
}

The mime.types are now extended with this type, which is an Angular 8 "feature" (or bug, it depends on your point of view...).

Hope it works in your case (or future readers'), I use the same stack and it works fine by me.

answered Jan 23, 2020 at 20:46

user11593453

Sign up to request clarification or add additional context in comments.

4 Comments

Den Kerny Over a year ago

did u have error like: nginx: [warn] duplicate extension "js", content type: "application/javascript", previous content type: "module" in ~nginx/conf/mime.types:8

user11593453 Over a year ago

@DenKerny yes, this error also occured. Can't remember how I solved it, I'll keep you updated if I figure it out.

user11593453 Over a year ago

I also go this in my config, might resolve mime types conflicts: add_header X-Content-Type-Options nosniff;, does it help?

user11593453 Over a year ago

Actually I still get the error, but could not see it directly (was piped to docker container log). I'll take a deeper look at it, but it does not seem to cause any runtime problem

Collectives™ on Stack Overflow

mime.types is not used for javascript and css files for angular 8 application(dockerized with nginx:alpine)

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related