Nginx was blocked because of a disallowed MIME type (“text/html”). Angular 8

Question

everythink working awesome with these codes.

 http {
        include       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  logs/access.log  main;

        sendfile        on;
        #tcp_nopush     on;

        #keepalive_timeout  0;
        keepalive_timeout  65;

        gzip  on;

        gzip_static on;
            gzip_disable "MSIE [1-6]\\.(?!.*SV1)";
            gzip_proxied any;
            gzip_comp_level 5;
            gzip_types text/plain text/css application/javascript application/x-javascript text/xml application/xml application/rss+xml text/javascript image/x-icon image/bmp image/svg+xml;
            gzip_vary on;


        server {
            listen       80;
            server_name  127.0.0.1;


            gzip_static on;
            gzip_disable "MSIE [1-6]\\.(?!.*SV1)";
            gzip_proxied any;
            gzip_comp_level 5;
            gzip_types text/plain text/css application/javascript application/x-javascript text/xml application/xml application/rss+xml text/javascript image/x-icon image/bmp image/svg+xml;
            gzip_vary on;

            #Working awesome
            location / {
            #This is For Angular 8 App And Working Good
              proxy_pass   http://127.0.0.1:4200;
                      proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;

                }
            }

But when ı add it to domain extra app it become a huge problem. With these codes:

http {
    include       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  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    gzip  on;

    gzip_static on;
        gzip_disable "MSIE [1-6]\\.(?!.*SV1)";
        gzip_proxied any;
        gzip_comp_level 5;
        gzip_types text/plain text/css application/javascript application/x-javascript text/xml application/xml application/rss+xml text/javascript image/x-icon image/bmp image/svg+xml;
        gzip_vary on;


    server {
        listen       80;
        server_name  127.0.0.1;
        index index.html;
        root /Users/FURKAN/Desktop/exampleforstatichtmlpage;

        gzip_static on;
        gzip_disable "MSIE [1-6]\\.(?!.*SV1)";
        gzip_proxied any;
        gzip_comp_level 5;
        gzip_types text/plain text/css application/javascript application/x-javascript text/xml application/xml application/rss+xml text/javascript image/x-icon image/bmp image/svg+xml;
        gzip_vary on;


        location / {
            index index.html;


        }
        location /api/ {
             #Api working
             proxy_pass   http://127.0.0.1:3456/;


        }
        location /api/kullanicis {
             #Api working
             proxy_pass   http://127.0.0.1:3456/kullanicis;


        }
        location /api/yazars {
             #Api working
             proxy_pass   http://127.0.0.1:3456/yazars;


        }
        location /api/kitaps {
             #Api working
             proxy_pass   http://127.0.0.1:3456/kitaps;


        }
        location /demo {
         #This is For Angular 8 App And Not Working ı am getting error
          proxy_pass   http://127.0.0.1:4200;
         proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

        }    
        }

Getting these errors enter image description here

I have one domain and static files. I want to add angular 8 app to same domain like example.com/demo will open my angular 8 app. My api is working with nginx except angular app.

Angular Index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Client</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Answer 1

when you build your application your app should know under which path it will be "hosted". in your new version this path is '/demo/'. so to make your app wokring just add param to the build command like this

ng build --prod --baseHref=/demo/

Answer 2

I solved the same problem changing the file /etc/nginx/sites-available/default with following content, to enable serving js and css with NGINX:

server {
    listen 8080;
    server_name yourserver.com;
    root /var/www/html/api;

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

    location ~* \.(js|css)$ { # Enable serving js and css files
        # Additional headers if needed
    }
}