I'm hosting multiple Angular applications on a Windows machine using nginx. I have a landing page (index.html) that lets me choose between two Angular projects—protocolviewer and conficviewer—which are built with the correct base-href settings. The applications work perfectly when navigated via Angular's internal routing.

However, when I directly enter a URL corresponding to an Angular route (e.g., http://localhost/protocolviewer/projects), nginx returns a 404 Not Found error.

I understand that this is likely an issue with HTML5 routing (pushState) in Angular, where the server must fallback to index.html for all client-side routes. I have tried several configurations with both alias and root along with the try_files directive, but nothing seems to work.

My Environment:

• Angular Version: 18.2.11

• nginx Version: 1.27.4

• Operating System: Windows 11

• Angular Build Command (protocolviewer):

  ng build --configuration=production --base-href /protocolviewer/
  
  

Current nginx Configuration:

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        # Standard landing page (project selection)
        location / {
            root   C:/Users/-----/Documents/nginx/nginx-1.27.4/html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        
        # Angular project "protocolviewer" under /protocolviewer
        location /protocolviewer/ {
            root   C:/Users/-----/Documents/nginx/nginx-1.27.4/html;
            index  index.html;
            # Fallback to /protocolviewer/index.html when file not found
            try_files $uri $uri/ /protocolviewer/index.html;
        }
        
        # Angular project "conficviewer" under /conficviewer
        location /conficviewer/ {
            root   C:/Users/-----/Documents/nginx/nginx-1.27.4/html;
            index  index.html;
            try_files $uri $uri/ /conficviewer/index.html;
        }

        # Error page for server errors
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   C:/Users/-------/Documents/nginx/nginx-1.27.4/html;
        }
    }
}

Issue:

When I directly access a route like http://localhost/protocolviewer/projects, nginx is trying to find a physical file or folder matching /protocolviewer/projects and returns a 404 error. I need nginx to fallback to serving protocolviewer/index.html so that Angular can handle the route client-side.

My Question:

How can I configure nginx to correctly serve my Angular applications in subdirectories so that direct URL access (i.e., typing the route into the address bar) correctly falls back to the index.html file?

Is there a recommended approach or best practice for hosting Angular apps (with HTML5 routing) on Windows with nginx?

What I've Tried:

1. Using root vs. alias:
   I have experimented with both directives. For example, using alias like this:

   location /protocolviewer/ {  
       alias C:/Users/-----/Documents/nginx/nginx-1.27.4/html/protocolviewer/;  
       index index.html;  
       try_files $uri $uri/ index.html;  
   }
   
   

   However, this caused issues with the request path, so I reverted back to using root.

2. Ensuring Correct Angular Build:
   I verified that the Angular build includes the proper base-href (i.e., /protocolviewer/ for the protocolviewer project).

3. Clearing Browser Cache:
   I cleared my browser cache to ensure it wasn't serving an older version of my application.