Deploying Angular Apps
Build optimized Angular bundles with ahead-of-time compilation and deploy to static hosts or Angular Universal SSR.
PlatformsIntermediate
Why
Angular's AOT compiler and budget system catch bundle bloat at build time, producing highly optimized static output. The CLI handles service workers, prerendering, and i18n out of the box for production deploys.
Platform-as-a-Service adoption grew 24% in 2024 as teams shift from VM management to git-push deploys. the cloud infrastructure market reached $330B in 2024, growing 22% year-over-year (Synergy Research), and PaaS layers capture the majority of new workloads.
When
Use Angular for enterprise SPAs with strict typing, complex forms, and long-term maintainability. Add Universal when SEO of dynamic content is required.
How
1. Build — ng build --configuration production outputs dist/<project>/
2. Base href — index.html <base href> or --base-href flag for sub-path
3. SPA fallback — server rewrites all routes to index.html
4. Service worker — ng add @angular/pwa for offline caching
5. SSR — ng add @nguniversal/express-engine, build + serve:ssr
6. Deploy — upload dist/ to static host or run Node SSR server
7. Budgets — angular.json budgets catch component/style size overruns
Example
// angular.json — production budget config
{
"projects": {
"myapp": {
"architect": {
"build": {
"configurations": {
"production": {
"budgets": [
{ "type": "initial", "maximumWarning": "500kb", "maximumError": "1mb" },
{ "type": "anyComponentStyle", "maximumWarning": "4kb" }
],
"outputHashing": "all"
}
}
}
}
}
}
}
// Deploy sub-path — ng build --base-href /app/
// vercel.json — SPA fallback
{ "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] }
// SSR server (Angular Universal)
// server.ts — run: node dist/server/main.js
Common Problems
- ⚠Bundle budget error blocks build — a component exceeded 4kb style limit, raise budget or refactor
- ⚠Base href wrong in sub-path deploy — routes resolve to / instead of /app/, use --base-href
- ⚠Service worker serves stale content — SW version mismatch, update ngsw-config assetGroups
Best Practices
- ✓Set strict budgets in angular.json — fail build early on bloat rather than shipping 2MB bundles
- ✓Use lazy-loaded routes (loadComponent) for feature modules to keep initial bundle under budget
- ✓Set up health checks and graceful shutdown — handle SIGTERM to drain in-flight requests before exit