Vfrdtyky

So I have been hitting my head since the past couple of days trying to fix this weird issue. Basically If I try accessing my Angular 2 app through a domain name (example.com), it will be stuck on the loading screen.

But If I try accessing the very same app without nginx, it loads the entire app just fine.

Plus the error in the browser console is "main.(some-random-numbers-and-alphabets).js not found (404). Even though the file exists in the same directory (/dist).

At this point I am not sure if there is an error with NGINX or with my Angular Build. Below is my NGINX configuration. Please suggest any solutions. Thanks.

user www-data;

pid /run/nginx.pid;

worker_processes auto;

worker_rlimit_nofile 65535;



events {

    multi_accept on;

    worker_connections 65535;

}



http {

    charset utf-8;

    sendfile on;

    tcp_nopush on;

    tcp_nodelay on;

    server_tokens off;

    log_not_found off;

    types_hash_max_size 2048;

    client_max_body_size 16M;



    # MIME

    include mime.types;

    default_type application/octet-stream;



    # logging

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

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



    # SSL

    ssl_session_timeout 1d;

    ssl_session_cache shared:SSL:50m;

    ssl_session_tickets off;



    # Diffie-Hellman parameter for DHE ciphersuites

    ssl_dhparam /etc/nginx/dhparam.pem;



    # intermediate configuration

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

    ssl_ciphers ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA:ECDHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES256-SHA:ECDHE-ECDSA-DES-CBC3-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:DES-CBC3-SHA:!DSS;

    ssl_prefer_server_ciphers on;



    # OCSP Stapling

    ssl_stapling on;

    ssl_stapling_verify on;

    resolver 1.1.1.1 1.0.0.1 8.8.8.8 8.8.4.4 208.67.222.222 208.67.220.220 valid=60s;

    resolver_timeout 2s;



    # load configs

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



    # www.example.com

    server {

        listen 443 ssl http2;

        listen [::]:443 ssl http2;



        server_name www.example.com;

        root /var/www/example.com/public;



        # SSL

        ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;

        ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

        ssl_trusted_certificate /etc/letsencrypt/live/example.com/fullchain.pem;



        # logging

        access_log /var/log/nginx/example.com.access.log;

        error_log /var/log/nginx/example.com.error.log warn;



        # reverse proxy

        location / {

            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_set_header X-Real-IP $remote_addr;

            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

            proxy_set_header X-Forwarded-Proto $scheme;

            proxy_set_header X-Forwarded-Host $host;

            proxy_set_header X-Forwarded-Port $server_port;

            proxy_cache_bypass $http_upgrade;

        }



        # security headers

        add_header X-Frame-Options "SAMEORIGIN" always;

        add_header X-XSS-Protection "1; mode=block" always;

        add_header X-Content-Type-Options "nosniff" always;

        add_header Referrer-Policy "no-referrer-when-downgrade" always;

        add_header Content-Security-Policy "default-src * data: 'unsafe-eval' 'unsafe-inline'" always;

        add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;



        # . files

        location ~ /. {

            deny all;

        }



        # assets, media

        location ~* .(?:css(.map)?|js(.map)?|jpe?g|png|gif|ico|cur|heic|webp|tiff?|mp3|m4a|aac|ogg|midi?|wav|mp4|mov|webm|mpe?g|avi|ogv|flv|wmv)$ {

            expires 7d;

            access_log off;

        }



        # svg, fonts

        location ~* .(?:svgz?|ttf|ttc|otf|eot|woff2?)$ {

            add_header Access-Control-Allow-Origin "*";

            expires 7d;

            access_log off;

        }



        # gzip

        gzip on;

        gzip_vary on;

        gzip_proxied any;

        gzip_comp_level 6;

        gzip_types text/plain text/css text/xml application/json application/javascript application/xml+rss application/atom+xml image/svg+xml;

    }



    # HTTP redirect

    server {

        listen 80;

        listen [::]:80;



        server_name .example.com;



        # ACME-challenge

        location ^~ /.well-known/acme-challenge/ {

            root /var/www/_letsencrypt;

        }



        location / {

            return 301 https://www.example.com$request_uri;

        }

    }

}

The issue could be with dist folder you had put into your site which is not recommendable and it will not work if your site folder doesn't point to dist folder directly. So what you can do is move your files of dist to site folder ( a level up from dist folder).

Thanks for you answers. I have actually figured out the issue and everything is working smoothly.

The solution is:-

 # . files

        location ~ /. {

            deny all;

        }

Deleting the code above. Post that everything worked fine. Thanks again.