Fix Load Balancer Error in Angular

Angular Apps Behind Load Balancers

When deploying Angular behind a load balancer (ALB, Nginx, HAProxy), you might encounter blank pages, broken assets, or WebSocket disconnects. Here's how to fix each one.

Base Href Mismatch

If your app is served under a subpath like /app/, the base href must match:

ng build --base-href /app/

Or in index.html:

<base href="/app/">

Without this, all relative asset paths break and you see a blank page.

Health Check Endpoint

Load balancers need something to ping. Serve a health route via your backend or add an index.html fallback:

# Nginx config
location /healthz {
  access_log off;
  return 200 'ok';
  add_header Content-Type text/plain;
}

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

WebSocket Through the Load Balancer

For Angular apps using real-time features with WebSockets:

location /ws {
  proxy_pass http://backend;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
  proxy_read_timeout 86400;
}

Sticky Sessions

If your Angular app authenticates via session cookies and runs multiple backend instances, enable sticky sessions:

# AWS ALB
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  annotations:
    alb.ingress.kubernetes.io/target-group-attributes: stickiness.enabled=true,stickiness.lb_cookie.duration_seconds=86400

Bugsly captures client-side Angular errors including the URL and user context, so you can correlate issues with specific load balancer routing paths.