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

Need a 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

Need a 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

Need a 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

Need a hint?

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