Angular Universal overview

Introduction

Angular Universal helps your Angular app load faster by running it on the server first. This makes pages appear quickly and helps search engines find your content.

You want your website to show content faster to users on slow connections.

You want search engines to easily read and index your app's pages.

You need better support for social media previews with correct page content.

You want to improve your app's performance and user experience on first load.

Syntax

Angular

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

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

Angular Universal uses a special server module to run your app on the server.

The tag is where your Angular app starts rendering.

Examples

This example renders the '/about' page on the server and logs the full HTML.

Angular

import { renderModule } from '@angular/platform-server';
import { AppServerModule } from './app/app.server.module';

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

This is the server module that Angular Universal uses to run your app on the server.

Angular

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [AppModule, ServerModule],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

Sample Program

This example shows a simple Angular app with Angular Universal server module. It renders the app on the server and prints the full HTML output.

Angular

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>Welcome to Angular Universal!</h1>`
})
export class AppComponent {}

@NgModule({
  declarations: [AppComponent],
  imports: [CommonModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

// Server module
import { ServerModule } from '@angular/platform-server';

@NgModule({
  imports: [AppModule, ServerModule],
  bootstrap: [AppComponent]
})
export class AppServerModule {}

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

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

Important Notes

Angular Universal improves SEO by sending fully rendered pages to browsers and search engines.

It requires a special server build of your Angular app.

Use Angular CLI commands like ng add @nguniversal/express-engine to set it up easily.

Summary

Angular Universal runs Angular apps on the server to speed up page loading.

This helps with SEO and user experience on slow networks.

It uses a server module and special rendering functions to create HTML on the server.