Nginx conf issues Angular SSR

Viewed 41

I have an angular app and in my app.routing.ts I have this config:

{
    path: '',
    redirectTo: 'todas',
    pathMatch: 'full',
},
{
    path: 'all',
    loadChildren: () => import('./pages/bus/bus.module').then(
      (m) => m.BusModule,
    ),
},
{
    path: 'trip/:id',
    loadChildren: () => import('./pages/trip/trip.module').then(
      (m) => m.TripModule,
    ),
},

Everything works ok if I run the app locally (ng serve).

I have problems when I do the built and then I use docker with nginx image to run the app. This is my default.conf:

upstream ssr_nodejs {
  server 127.0.0.1:4200;
  keepalive 64;
}

server {
    listen       80;
    server_name  localhost;
    root /dist/app;

    location / {
      try_files $uri $uri/ @backend;
    }

    location @backend {
        proxy_pass http://ssr_nodejs;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header Referer $http_referer;
        proxy_set_header X-NginX-Proxy true;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Host $http_host;
        proxy_ignore_client_abort on;
        proxy_headers_hash_max_size 512;
        proxy_hide_header X-Powered-By;
        proxy_hide_header Vary;
    }
}

Using nginx like server, I go to http://localhost:4200 and the url changes to /all and everything works OK. But if I open a new tab and type http://localhost:4200/all I get the error:

502 Bad Gateway

The same with the rest of urls.

0 Answers
Related