Angular Universal overview - Step-by-Step Execution

Concept Flow - Angular Universal overview

User requests page

↓

Server receives request

↓

Angular Universal renders app on server

↓

Server sends fully rendered HTML

↓

Browser displays content immediately

↓

Angular app bootstraps on client

↓

App becomes interactive

Angular Universal renders the Angular app on the server first, sends ready HTML to the browser, then the app starts on the client for interactivity.

Execution Sample

Angular

import { renderModule } from '@angular/platform-server';

renderModule(AppServerModule, { document: '<app-root></app-root>', url: '/' })
  .then(html => console.log(html));

This code renders the Angular app on the server and outputs the HTML string.

Execution Table

Step	Action	Input	Output	Notes
1	Receive HTTP request	GET /	Request object	Server gets page request
2	Call renderModule	AppServerModule, document, url	Promise of HTML string	Start server-side rendering
3	Render Angular app	App components	HTML string with content	App rendered as static HTML
4	Send HTML to browser	HTML string	Browser receives HTML	Page shows content immediately
5	Browser bootstraps Angular	HTML page	Interactive Angular app	App becomes dynamic
6	User interacts	Clicks, inputs	App responds	Full Angular app behavior
7	End	-	-	Process complete

💡 Rendering completes when server sends HTML and client bootstraps Angular app.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	Final
request	undefined	GET /	GET /	GET /	GET /	GET /
html	undefined	pending Promise	<app-root>Rendered content</app-root>	<app-root>Rendered content</app-root>	<app-root>Rendered content</app-root>	<app-root>Rendered content</app-root>
appState	undefined	undefined	server rendered	server rendered	hydrated client app	interactive client app

Key Moments - 3 Insights

Why does Angular Universal render the app on the server before sending it?

Rendering on the server creates a fully formed HTML page that the browser can show immediately, improving load speed and SEO. See execution_table step 3 and 4.

What happens after the server sends the HTML to the browser?

The browser displays the static HTML, then Angular bootstraps on the client to make the app interactive. See execution_table steps 4 and 5.

Is the app fully interactive right after the server sends HTML?

No, the app becomes interactive only after Angular bootstraps on the client (step 5). Before that, the page is static but visible.

Visual Quiz - 3 Questions

Look at the execution_table, what is the output after step 3?

A A Promise of HTML string

B HTML string with content

C Interactive Angular app

D Request object

💡 Hint

Check the 'Output' column for step 3 in execution_table.

At which step does the browser start showing the page content?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look for when the server sends HTML to the browser in execution_table.

If Angular did not bootstrap on the client, what would the user experience be?

A Page would be static and non-interactive

B Page would be fully interactive

C Page would be blank

D Page would reload continuously

💡 Hint

Refer to variable_tracker 'appState' after step 4 and 5.

Concept Snapshot

Angular Universal renders Angular apps on the server first.
It sends fully rendered HTML to the browser for fast display.
Then Angular bootstraps on the client to add interactivity.
This improves load speed and SEO.
Use renderModule() to render on the server.
The app is static until client bootstraps.

Full Transcript

Angular Universal is a way to run Angular apps on the server. When a user requests a page, the server renders the app into HTML. This HTML is sent to the browser so the user sees content immediately. Then Angular starts on the browser to make the app interactive. This process improves page load speed and helps search engines read the content. The key steps are receiving the request, rendering the app on the server, sending HTML to the browser, and bootstrapping Angular on the client. Until Angular boots on the client, the page is static but visible. After bootstrapping, the app becomes fully interactive.