Angular Universal overview - Mini Project: Build & Apply

Angular Universal Overview

📖 Scenario: You are building a simple Angular app that shows a welcome message. You want to prepare it for server-side rendering using Angular Universal to improve loading speed and SEO.

🎯 Goal: Create a basic Angular component and set up Angular Universal configuration files step-by-step to enable server-side rendering.

📋 What You'll Learn

Create a basic Angular component with a welcome message

Add a configuration variable to enable server-side rendering

Implement the main server module for Angular Universal

Complete the setup by adding the server main file

💡 Why This Matters

🌍 Real World

Angular Universal helps websites load faster and improves SEO by rendering pages on the server before sending them to the browser.

💼 Career

Understanding Angular Universal is important for frontend developers working on performance optimization and SEO-friendly Angular applications.

1

Create a basic Angular component

Create an Angular component called AppComponent with a template that displays the text Welcome to Angular Universal!.

Angular

import { Component } from '@angular/core';

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

Need a hint?

Use @Component decorator with selector and template properties.

2

Add server-side rendering configuration

Create a constant called enableSSR and set it to true to indicate server-side rendering is enabled.

Angular

import { Component } from '@angular/core';

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

const enableSSR = true; // Your code here

Need a hint?

Use const enableSSR = true; to set the SSR flag.

3

Implement the main server module

Create a server module called AppServerModule that imports AppComponent and uses @NgModule decorator with bootstrap set to [AppComponent].

Angular

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

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

const enableSSR = true;

@NgModule({
  bootstrap: [AppComponent]
})
export class AppServerModule {
  // Your code here
}

Need a hint?

Use @NgModule with bootstrap array including AppComponent.

4

Add the server main file

Create a file that imports enableSSR and AppServerModule and exports a constant called serverApp set to AppServerModule if enableSSR is true.

Angular

import { enableSSR, AppServerModule } from './app.module';

export const serverApp = enableSSR ? AppServerModule : null; // Your code here

Need a hint?

Use a conditional export to assign serverApp based on enableSSR.