angularnginxangular13serveangular14

I upgraded to Angular 13 and hot-reload stopped working with Nginx


I have an Angular application, and I just updated to Angular 13, but this problem also happens with new Angular 14 apps.

I used to serve my apps locally using ng serve --host 0.0.0.0 --disable-host-check

but for some reason, now the hot reload stopped working with my old nginx configuration. I dont know what I'm doing wrong or what are the changes on Angular side.

Here's my Nginx conf:

user  nginx;
worker_processes  2;

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        off;
  #tcp_nopush     on;

  keepalive_timeout  65;

  #gzip  on;

  upstream app {
    server django:10000;
  }

  server {
    listen 80 default_server;
    server_name _;
    if ($host != nginx) {
      return 301 https://example.com$request_uri;
    }

    location / {
      # check if the static file exists, if not then go to app
      try_files $uri @proxy_to_app;
    }

    location @proxy_to_app {
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_redirect off;
      # pass the protocol to our backend
      proxy_set_header X-Forwarded-Proto $scheme;

      proxy_pass   http://app;
    }
  }

  server {
    server_name _;
    listen 443 default_server ssl;
    ssl_certificate /etc/nginx/ssl/nginx.crt;
    ssl_certificate_key /etc/nginx/ssl/nginx.key;
    return 301 https://example.com$request_uri;
  }

  server {
    server_name example.com;
    # server_name 172.17.0.1;
    listen 443 ssl;
    ssl_certificate /etc/nginx/ssl/nginx.crt;
    ssl_certificate_key /etc/nginx/ssl/nginx.key;

    charset     utf-8;

    location / {
      # this is for static files
      # try_files $uri @proxy_to_app;
      # this is for dynamic front-end generation
      proxy_pass http://172.17.0.1:4200/;
      proxy_buffer_size 200m;
      proxy_buffering on;
      proxy_buffers 10 200m;
      proxy_read_timeout 1000;
      proxy_send_timeout 1000;
      send_timeout 1000;
      proxy_connect_timeout 1000;
    }

    location /robots {
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_redirect off;
      # pass the protocol to our backend
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_pass http://app;
      proxy_buffer_size 200m;
      proxy_buffering on;
      proxy_buffers 10 200m;
      proxy_read_timeout 1000;
      proxy_send_timeout 1000;
      send_timeout 1000;
      proxy_connect_timeout 1000;
      uwsgi_read_timeout 300;
    }

    # cookiecutter-django app
    location @proxy_to_app {
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_redirect off;
      # pass the protocol to our backend
      proxy_set_header X-Forwarded-Proto $scheme;

      proxy_pass   http://app;

      proxy_buffer_size 200m;
      proxy_buffering on;
      proxy_buffers 10 200m;
      proxy_read_timeout 1000;
      proxy_send_timeout 1000;
      send_timeout 1000;
      proxy_connect_timeout 1000;
    }

  }
}

It was working with Angular 11 and 12, but for some reason now its not working anymore.. any ideas??

This is the error I'm getting:

error-on-chrome

and this is how I build my nginx docker:

VOLUME /etc/nginx/ssl


ADD run-nginx.sh /root/run-nginx.sh

# ssl certificate
ADD create-certs-if-needed.sh /root/create-certs-if-needed.sh

RUN ls /etc/nginx/ssl
RUN chmod +x /root/run-nginx.sh

Solution

  • I added this in my nginx.conf and now it works!

        location / {
          # this is for static files
          # try_files $uri @proxy_to_app;
          # this is for dynamic front-end generation
          proxy_pass http://172.17.0.1:4200/;
          proxy_buffer_size 200m;
          proxy_buffering on;
          proxy_buffers 10 200m;
          proxy_read_timeout 1000;
          proxy_send_timeout 1000;
          send_timeout 1000;
          proxy_connect_timeout 1000;
          
          # added this lines below
          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;
        }