Nginx reverse proxy for Angular apps

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;
       }
   }

}