Angular Routing and nginx Configuration – Direct URL Access Returns 404

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.
   

Continue reading...