SSR and Deployment

Server-Side Rendering (Angular SSR)

1# Add SSR to the project
2ng add @angular/ssr
3
4# Or when creating a new project
5ng new my-app --ssr

SSR Configuration

1// app.config.server.ts
2import { ApplicationConfig, mergeApplicationConfig } from '@angular/core';
3import { provideServerRendering } from '@angular/platform-server';
4import { appConfig } from './app.config';
5
6const serverConfig: ApplicationConfig = {
7  providers: [
8    provideServerRendering()
9  ]
10};
11
12export const config = mergeApplicationConfig(appConfig, serverConfig);

Prerendering (SSG)

1// angular.json
2{
3  "architect": {
4    "prerender": {
5      "builder": "@angular/build:prerender",
6      "options": {
7        "routes": [
8          "/",
9          "/about",
10          "/samurai/1",
11          "/samurai/2"
12        ]
13      }
14    }
15  }
16}

PWA (Progressive Web App)

1ng add @angular/pwa

1// Service Worker registration
2import { isDevMode } from '@angular/core';
3import { provideServiceWorker } from '@angular/service-worker';
4
5export const appConfig: ApplicationConfig = {
6  providers: [
7    provideServiceWorker('ngsw-worker.js', {
8      enabled: !isDevMode(),
9      registrationStrategy: 'registerWhenStable:30000'
10    })
11  ]
12};

Production Build

1# Build with optimizations
2ng build --configuration=production
3
4# With bundle analysis
5ng build --stats-json
6npx webpack-bundle-analyzer dist/browser/stats.json
7
8# Local preview
9npx http-server dist/browser

Deployment Platforms

1# Vercel
2npm i -g vercel
3vercel
4
5# Netlify
6npm i -g netlify-cli
7netlify deploy --prod
8
9# Firebase
10ng add @angular/fire
11ng deploy