How to config Nginx to serve Angular app when the angular urls are like this http://serverpath/a/b?

Question

I'm trying to serve an Angular(V7) app with Nginx.

according to https://angular.io/guide/deployment#fallback-configuration-examples

I change default Nginx config try_files $uri $uri/ =404; to

try_files $uri $uri/ /index.html;

My Nginx config file looks like below:

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /home/shiri/www/public;

    # Add index.php to the list if you are using PHP
    index index.html index.htm index.nginx-debian.html;

    server_name _;

    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
        #try_files $uri $uri/ =404;
        try_files $uri $uri/ /index.html;
    }
}

This does not work well when the angular URLs are like this http://serverpath/a/b all ".css" and ".js" files will try to load from http://serverpath/a/

I have seen this problem in here: https://gist.github.com/zdwolfe/6721115 and some other places but haven't been able to fix.

Thanks in advance.

Solution

You should specify a base path in the index.html:

<base href="/">
<base href="/a/b/">