Angular Academy · Lesson

Setting Up Angular SSR

Add SSR with the Angular CLI.

Lesson 2 of 413 steps

Setting Up Angular SSR is a free Angular Academy lesson on CoddyKit. This is lesson 2 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

Adding SSR

The fastest way to enable SSR is the schematic ng add @angular/ssr. It wires up the server build, an Express-based server, and hydration for you.

// terminal
// ng add @angular/ssr

New Projects

When creating a new app you can opt in directly with the SSR flag, so the project starts SSR-ready.

// ng new my-app --ssr

What The Schematic Adds

It adds a server.ts (Express server), a main.server.ts bootstrap, an app.config.server.ts, updates angular.json with server options, and enables hydration in the app config.

provideServerRendering

The server application config provides the SSR engine via provideServerRendering(), merged with your browser config.

// app.config.server.ts
import { provideServerRendering } from '@angular/ssr';
import { mergeApplicationConfig } from '@angular/core';

const serverConfig = { providers: [provideServerRendering()] };
export const config = mergeApplicationConfig(appConfig, serverConfig);

Hydration On The Client

The browser config enables hydration so the client reuses server HTML instead of re-rendering. This is added automatically by the schematic.

// app.config.ts
import { provideClientHydration } from '@angular/platform-browser';

export const appConfig = {
  providers: [provideClientHydration()]
};

The Express Server

server.ts creates an Express app that serves static assets and delegates HTML rendering to the Angular SSR engine for all other routes.

// server.ts (simplified)
const app = express();
app.get('**', (req, res) => {
  angularApp.handle(req).then(response =>
    response ? writeResponseToNodeResponse(response, res) : res.sendStatus(404)
  );
});

Dev Server

During development ng serve runs SSR automatically with the application builder, so you see server-rendered output and hydration without extra steps.

// ng serve

Building For Production

A production build emits a browser bundle and a server bundle. You run the Node server entry to serve SSR in production.

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

Browser-Only APIs

Code runs on the server too, where window, document, and localStorage do not exist. Guard such access or it will crash during SSR.

import { isPlatformBrowser } from '@angular/common';
import { inject, PLATFORM_ID } from '@angular/core';

const isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
if (isBrowser) { localStorage.setItem('k', 'v'); }

Absolute URLs For HTTP

On the server, relative API URLs have no origin. Use absolute URLs or configure a base so server-side HttpClient calls resolve correctly.

Verifying SSR Works

To confirm SSR, request a page and inspect the raw response (for example with curl). You should see rendered content in the HTML, not just an empty app root.

// curl http://localhost:4000/ | grep "<h1>"

Quick Check

Check your SSR setup knowledge.

Answer it in the interactive lesson

Recap

You set up SSR with ng add @angular/ssr: it adds an Express server, provideServerRendering(), and client hydration. Remember to guard browser-only APIs, use absolute URLs server-side, and verify rendered HTML in the raw response.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

Is the “Setting Up Angular SSR” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “Setting Up Angular SSR”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

What will I learn in “Setting Up Angular SSR”?

Add SSR with the Angular CLI. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.

How long does the “Setting Up Angular SSR” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy