1

I recently updgraded my project from Angular 14 to 15 and started receive 502 errors.

Project works with SSR and Nginx

So, I locally run

npm run build:ssr

receive server and browser dirs, move them on server and on server run nginx in docker with config

server {
    listen 443 ssl;
    gzip on;
    gzip_types text/plain text/css application/javascript application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_proxied no-cache no-store private expired auth;
    gzip_min_length 1000;
    server_name ${NGINX_HOST};
    ssl_certificate /etc/letsencrypt/live/${NGINX_HOST}/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/${NGINX_HOST}/privkey.pem;
    
    location /api {
        proxy_pass http://core;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_redirect off;
    }

    location / {
        alias /frontend/browser/;
        index index.html;
        try_files $uri  @universal;
    }
    
    location @universal {
        #port defined in your server.js
        proxy_pass http://localhost:4000; 
        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;

    }
}

With build results from Angular 14 this still works perfect.

If I use build results of Angular 15, I'm receiving 502 errors from Nginx (connect() failed while connecting to upstream) if call /. Api still works well.

What is weird - if I start nginx with server and browser dirs prepared through Angular 14 and then without restarting, replace those dirs with Angular 15 folders, everything still works properly (and in my browser I can see the new version of the app). After restart, I start receiving 502 again.

My Angular server.ts file wasn't changed during the upgrade, but the result main.js files are quite different.

What can be the source of such a problem?

I tried to change ports (from 4000 to 8000) in different combinations, so managed to receive 502 error even on Angular 14 version.

Tried to run

npm run serve:ssr

with Angular 15 locally, everything works perfect (port is 4000)

Checked main.js run logs and found an error:

nginx    |     SyntaxError: Unexpected token '.'
nginx    |     at wrapSafe (internal/modules/cjs/loader.js:915:16)
nginx    |     at Module._compile (internal/modules/cjs/loader.js:963:27)
nginx    |     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
nginx    |     at Module.load (internal/modules/cjs/loader.js:863:32)
nginx    |     at Function.Module._load (internal/modules/cjs/loader.js:708:14)
nginx    |     at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
nginx    |     at internal/main/run_main_module.js:17:47

But how to debug, where this '.' is unexpected?

Vitaly
  • 21
  • 3

1 Answers1

1

The problem was with node version.

Server/main.js in Angular 15 depends on node v16+.

Server/main.js in Angular 14 can work with node v12.

For some reason cmd

RUN apt-get update && apt-get upgrade -y && apt-get install npm -y

In my dockerfile installed node 12 and npm 7 (docker based on FROM nginx:stable).

Adding of two lines

RUN npm install -g n && n latest
RUN npm install -g npm@latest

in the Dockerfile resolved the problem.

Vitaly
  • 21
  • 3