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:
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
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;
}