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 you choose how each route is rendered: