Nginx reverse proxy for Angular apps

Question

I have created a reverse proxy using Nginx which redirects in various applications (ASP.NET API's and Angular app's).

Reverse proxy nginx.conf (the most important settings):

...
server {
    listen 80;
    server_name localhost 127.0.0.1;

    location /projects/sample-app1/api {
        proxy_pass http://sample-app1-api:80;
    }

    location /projects/sample-app1 {
        # Angular app
        proxy_pass http://sample-app1:80;
    }

    location /projects/sample-app2 {
        # Angular app 
        proxy_pass http://sample-app2:80;
    }

    location /api {
        proxy_pass http://random-api:80;
    }

    location / {
        proxy_pass http://personal-app:80;
    }
}

All API's are available and work properly because their path indicated by the location parameter is the same as in the controllers. An Angular application that runs on the url "/" also works, but the problem is with "sample-app1" and "sample-app2". When I type the url to go to these applications, I get an error similar to:

Uncaught SyntaxError: Unexpected token < main.d6f56a1….bundle.js:1

My suspicion is that the URL leading to the application contains additional elements (/projects/sample-app1) and its default index path is simply "/". So I would have to rewrite to remove the redundant part of the URL, but how to do it? My attempts so far have not been successful and I have tried different ways from other threads on StackOverflow and Github.

Angular App nginx.conf:

events{}
http {
   include /etc/nginx/mime.types;

   server {
       listen 80;
       server_name localhost;
       root /usr/share/nginx/html;
       index index.html;

       location / {
           try_files $uri $uri/ /index.html;
       }
   }

}

Answer 1

Part of the solution is the response of the user: Esmaeil Mazahery, but a few more steps must be taken.

First, I changed the Angular application Dockerfile (passed additional build parameters like: base-href and deploy-url)

RUN npm run ng build -- --prod --base-href /projects/sample-app1/ --deploy-url /projects/sample-app1/

Then, I changed the reverse proxy nginx.conf configuration from

location /projects/sample-app1 {
    # Angular app
    proxy_pass http://sample-app1:80;
}

to:

location /projects/sample-app1 {
    # Angular app
    proxy_pass http://sample-app1:80/;
}

Redirection did not work properly without a slash at the end.

The order in which nginx redirects are matched is also important. Therefore, before the addresses: /projects/sample-app1 and /projects/sample-app2 I put the symbol ^~, which causes the given locations to be taken first. This nginx localization simulation tool also proved very useful: Nginx location match tester