Pre-rendering static pages in Angular - Mini Project: Build & Apply

Pre-rendering Static Pages with Angular

📋 What You'll Learn

💡 Why This Matters

🌍 Real World

Pre-rendering static pages is useful for websites that want fast load times and better SEO by serving ready-made HTML pages instead of waiting for JavaScript to build the page.

💼 Career

Many companies use Angular pre-rendering or server-side rendering to improve user experience and search engine ranking, so knowing how to set this up is valuable for frontend developers.

1

Create the HomeComponent with a welcome message

Create a standalone Angular component named HomeComponent with a template that contains an <h1> tag showing the text Welcome to Sweet Treats Bakery.

Angular

// Create HomeComponent with template
// Your code here

Hint

Use @Component decorator with standalone: true and a simple template string.

2

Add prerenderRoutes configuration for pre-rendering

Create a constant variable named prerenderRoutes and set it to an array containing the string '/' to specify the homepage route for pre-rendering.

Angular

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

@Component({
  selector: 'app-home',
  standalone: true,
  template: `Welcome to Sweet Treats Bakery`
})
export class HomeComponent {}

// Define prerenderRoutes array
// Your code here

Hint

Use export const prerenderRoutes = ['/' ]; to specify the homepage route.

3

Set up Angular routing with HomeComponent

Create a standalone Angular module named AppModule that imports RouterModule with a route for path '' that loads HomeComponent. Also, import HomeComponent and RouterModule properly.

Angular

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

@Component({
  selector: 'app-home',
  standalone: true,
  template: `Welcome to Sweet Treats Bakery`
})
export class HomeComponent {}

export const prerenderRoutes = ['/'];

// Create AppModule with RouterModule and HomeComponent
// Your code here

Hint

Use RouterModule.forRoot with the route { path: '', component: HomeComponent } and bootstrap HomeComponent.

4

Add prerender command and finalize setup

Add a script named prerender in package.json that runs ng prerender. Also, ensure the Angular app is configured to use the prerenderRoutes array for pre-rendering in angular.json or the appropriate config file.

Angular

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

@Component({
  selector: 'app-home',
  standalone: true,
  template: `Welcome to Sweet Treats Bakery`
})
export class HomeComponent {}

export const prerenderRoutes = ['/'];

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

@NgModule({
  imports: [
    RouterModule.forRoot([
      { path: '', component: HomeComponent }
    ])
  ],
  bootstrap: [HomeComponent]
})
export class AppModule {}

// Add "prerender" script to package.json and configure prerenderRoutes
// Your code here

Hint

Add a prerender script in package.json with the command ng prerender.

Practice

1. What is the main benefit of pre-rendering static pages in an Angular application?

easy

A. Improves page load speed and SEO by generating static HTML before user visits

B. Allows dynamic data fetching on every user request

C. Enables client-side routing without server involvement

D. Automatically updates content in real-time without reload

Solution

1. Step 1: Understand what pre-rendering does

   Pre-rendering generates static HTML pages ahead of time, before users visit the site.

2. Step 2: Identify benefits of static HTML

   Static pages load faster and improve SEO because search engines can easily read content.

3. Final Answer:

   Improves page load speed and SEO by generating static HTML before user visits -> Option A

4. Quick Check:

   Pre-rendering = faster load + better SEO [OK]

Hint: Pre-rendering means static pages ready before visit [OK]

Common Mistakes:

• Confusing pre-rendering with client-side dynamic rendering
• Thinking pre-rendering updates content in real-time
• Assuming pre-rendering fetches data on every request

2. Which command is used to generate static pages with Angular Universal for pre-rendering?

easy

A. ng serve --static

B. ng build --prod

C. npm run prerender

D. npm start prerender

Solution

1. Step 1: Recall Angular Universal pre-render command

   The standard command to generate static pages is npm run prerender.

2. Step 2: Eliminate incorrect commands

   ng build --prod builds the app but does not pre-render; ng serve --static and npm start prerender are invalid commands.

3. Final Answer:

   npm run prerender -> Option C

4. Quick Check:

   Pre-render command = npm run prerender [OK]

Hint: Use npm run prerender to generate static pages [OK]

Common Mistakes:

• Using ng build instead of prerender
• Confusing serve commands with prerender
• Typing npm start prerender which is invalid

3. Given this Angular pre-render setup snippet, what will be the output folder after running npm run prerender?

"prerender": "ng run my-app:prerender"

medium

A. dist/my-app/browser

B. dist/my-app/server

C. dist/my-app/static

D. dist/my-app/prerendered

Solution

1. Step 1: Understand Angular Universal output folder

   By default, Angular Universal outputs pre-rendered static pages into dist/my-app/prerendered.

2. Step 2: Differentiate output folders

   dist/my-app/browser is for client build, dist/my-app/server is for server bundle, and dist/my-app/static is not standard.

3. Final Answer:

   dist/my-app/prerendered -> Option D

4. Quick Check:

   Pre-render output folder = dist/my-app/prerendered [OK]

Hint: Pre-render output is in dist/my-app/prerendered folder [OK]

Common Mistakes:

• Confusing browser build folder with prerender output
• Assuming server folder contains static pages
• Guessing non-standard folder names

4. You run npm run prerender but get an error: "Cannot find module '@angular/platform-server'". What is the likely fix?

medium

A. Remove Angular Universal from the project

B. Install @angular/platform-server package using npm

C. Change the prerender script to use ng serve

D. Run npm install without any package name

Solution

1. Step 1: Identify missing module error cause

   The error means the Angular Universal server package is missing from node_modules.

2. Step 2: Fix by installing missing package

   Run npm install @angular/platform-server to add the required package.

3. Final Answer:

   Install @angular/platform-server package using npm -> Option B

4. Quick Check:

   Missing module error = install package [OK]

Hint: Missing module? Install it with npm install [OK]

Common Mistakes:

• Changing prerender script instead of fixing dependencies
• Removing Angular Universal unnecessarily
• Running npm install without specifying package

5. You want to pre-render multiple routes in your Angular app. Which configuration in angular.json helps specify routes for pre-rendering?

hard

A. "routes": ["/home", "/about", "/contact"] inside the prerender options

B. "lazyModules": ["home", "about", "contact"] inside build options

C. "serverTarget": "my-app:server" inside serve options

D. "outputPath": "dist/my-app/static" inside build options

Solution

1. Step 1: Identify prerender routes configuration

   Angular Universal uses a routes array inside prerender options to list paths to pre-render.

2. Step 2: Differentiate other options

   lazyModules is unrelated to prerender routes, serverTarget defines server build, and outputPath sets build output folder.

3. Final Answer:

   "routes": ["/home", "/about", "/contact"] inside the prerender options -> Option A

4. Quick Check:

   Pre-render routes = routes array in prerender options [OK]

Hint: List routes in prerender options to pre-render multiple pages [OK]

Common Mistakes:

• Using lazyModules instead of routes for prerender
• Confusing serverTarget with prerender routes
• Changing outputPath instead of routes