How can I deploy an angular universal in a sub path?

Question

I'm trying to deploy a basic angular universal app to a /sub/ folder. The page loads just find in that path, but the angular app js files does not.

I've set up an angular 17 app named subfold using ng cli enabling SSR. Then at angular.json file created a build configuration like this:

"insub": {
  "baseHref": "/sub/"
}

and a serve configuration like this:

"insub": {
  "buildTarget": "subfold:build:insub"
}

For build and serve I'm using these commands:

ng build --configuration insub;
node PORT=4003 dist/subfold/server/server.mjs --configuration=insub;

Visiting the http://localhost:4003/sub/ in the browser, the html loads just fine but main.js and polyfill.js files fail to load.

Here is the output from the cli:

ERROR z [Error]: NG04002: 'main.js'

Any help appreciated, Thanks

Answer 1

I couldn't find a way to make express engine work as expected. But here is a work around with an nginx server:

  location /sub/ {
    rewrite ^/sub/(.*) /$1 break;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_pass http://127.0.0.1:4000;
  }

Note that the /sub part of the url is omitted with a rewrite rule and also the proxy_pass is set to the root url not the /sub path.

Hope this will help someone. Regards.