Deployment

An Angular app is compiled ahead of time into static JavaScript, CSS and HTML. You can host that output on any static file server or CDN, or add server-side rendering for faster first loads and better SEO. This chapter covers production builds, static hosting, SSR and prerendering.

Production builds

ng build uses the production configuration by default. It compiles templates ahead of time, removes unused code, minifies the output and adds content hashes to file names for long-term caching:

ng build
ng build --configuration development
ng build --base-href /my-app/

The output goes to dist/my-app/browser/. Use --base-href when the app is served from a sub-path instead of the domain root.

Bundle budgets

angular.json can set size budgets so a build warns or fails when bundles grow too large. New projects come with sensible defaults that you can tighten:

"budgets": [
  { "type": "initial", "maximumWarning": "500kB", "maximumError": "1MB" },
  { "type": "anyComponentStyle", "maximumWarning": "4kB", "maximumError": "8kB" }
]

Lazy-loaded routes with loadComponent and @defer blocks are the most effective ways to keep the initial bundle small.

Static hosting

Copy the contents of dist/my-app/browser/ to your web server or hosting service. Because the router handles URLs in the browser, the server must return index.html for any path that is not a real file; otherwise reloading a deep link such as /heroes/42 returns 404. With nginx:

server {
  listen 80;
  root /usr/share/nginx/html;

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

A multi-stage Docker image builds the app with Node.js and serves it with nginx:

FROM node:lts-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npx ng build

FROM nginx:alpine
COPY --from=build /app/dist/my-app/browser /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

ng deploy can publish directly once a deployment package is added, for example ng add @angular/fire for Firebase Hosting or the community angular-cli-ghpages package for GitHub Pages.

Server-side rendering and prerendering

Enable SSR when creating a project with ng new my-app --ssr, or add it later:

ng add @angular/ssr

This adds a Node.js server entry (server.ts, built on Express), server configuration files and client hydration, so the browser reuses the server-rendered DOM instead of rebuilding it. In app.routes.server.ts you choose how each route is rendered:

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  { path: '', renderMode: RenderMode.Prerender },
  { path: 'heroes/:id', renderMode: RenderMode.Server },
  { path: '**', renderMode: RenderMode.Client },
];

Prerendering a route with parameters also requires a getPrerenderParams function that returns the values to build. After ng build, start the server bundle:

ng build
node dist/my-app/server/server.mjs

The ng add @angular/ssr schematic also adds an npm script for this, named like serve:ssr:my-app. Code that runs on the server has no window or document, so guard browser-only work with afterNextRender() or by checking the platform. If every route is prerendered, setting the build's outputMode to static produces files that can go on any static host.

Before you ship

• Run ng build and the unit tests in CI so broken builds never reach production.
• Serve files with compression and long cache lifetimes for hashed files, but keep index.html uncached.
• Keep API URLs in environment files and secrets on the server, never in the bundle.
• Update regularly with ng update, which migrates code automatically between major versions.

Summary

• ng build produces an optimized, hashed build in dist/<project>/browser/.
• Static hosting needs a fallback to index.html for client-side routes.
• ng add @angular/ssr adds server rendering, hydration and per-route render modes.
• ng deploy publishes through providers that offer a deployment package.

Official documentation

• Building Angular apps
• Deployment
• Server-side and hybrid rendering
• Hydration
• Angular documentation