Nginx config for angular app deployed to subfolder

I'm trying to deploy an Angular 8 app within a subfolder of my virtual machine, with the aim of ultimately being able to serve multiple websites from the same vm each from a different subfolder. The app has been deplyed previously under the root, so the problem is in the deployment.

My app is hosted at example.com, the index file is at /home/username/subfolder/dist/angular-project-name/index.html and I built the angular app using ng build --prod --base-href /subfolder/

Here is my nginx config:

server {
   listen 80 default_server;
   listen [::]:80 default_server;
   root /home/username/;
   server_name www.example.com example.com;
   index index.html index.htm;

   location /subfolder/ {
      alias /home/username/subfolder/dist/angular-project-name/;
   }

   location /subfolder/api/ {
      proxy pass http://www.example.com:8080/api/;
      # ... other proxy settings 
   }
}

Now this allows my app to load at the path example.com/subfolder/ - the angular front end is found, routes to the default url (example.com/subfolder/param1/param2, the backend connects and returns data, and everything looks fine. But if I now refresh that page or attempt to navigate, I get a 404 Not Found error. The nginx error logs states:

"/home/username/subfolder/dist/angular-project-name/param1/param2" failed (2: No such file or directory), client: xxx.xxx.xxx.xxx, server: example.com, request: "GET /subfolder/param1/param2 HTTP/1.1", host: "www.example.com"

Why is the angular navigation broken and what changes do I need in my nginx config to fix it? Many thanks.