Pre-rendering static pages in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be the rendered output of this Angular component when pre-rendered?

Consider this Angular standalone component that uses pre-rendering:

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

@Component({
  selector: 'app-greeting',
  standalone: true,
  template: `
    
{{ greeting() }}
  `
})
export class GreetingComponent {
  greeting = signal('Hello, Angular!');
}

What will the static HTML output be after pre-rendering?

Angular

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

@Component({
  selector: 'app-greeting',
  standalone: true,
  template: `
    <h1>{{ greeting() }}</h1>
  `
})
export class GreetingComponent {
  greeting = signal('Hello, Angular!');
}

A <h1></h1>

B <h1>Hello, Angular!</h1>

C <h1>{{ greeting() }}</h1>

D <h1>undefined</h1>

💡 Hint

Signals provide reactive values that Angular can evaluate during pre-rendering.

The signal greeting holds the string 'Hello, Angular!'. During pre-rendering, Angular evaluates the template and replaces {{ greeting() }} with the signal's current value, producing <h1>Hello, Angular!</h1>.

❓ lifecycle

intermediate

Which Angular lifecycle hook is NOT called during pre-rendering?

When Angular pre-renders a static page, it runs some lifecycle hooks of components. Which of the following lifecycle hooks is not executed during pre-rendering?

A ngOnDestroy

B ngOnInit

C ngOnChanges

D ngAfterViewInit

💡 Hint

Think about hooks that are called during component cleanup.

During pre-rendering, Angular initializes components and calls lifecycle hooks up to ngAfterViewChecked, but ngOnDestroy is not called because there is no component destruction phase on the server.

🔧 Debug

advanced

Why does this Angular pre-rendered page show empty content?

Given this Angular component used in pre-rendering:

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

@Component({
  selector: 'app-time',
  standalone: true,
  template: `
The time is: {{ currentTime }}
`
})
export class TimeComponent {
  currentTime = new Date().toLocaleTimeString();
}

After pre-rendering, the page shows <p>The time is: </p> with no time displayed. Why?

Angular

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

@Component({
  selector: 'app-time',
  standalone: true,
  template: `<p>The time is: {{ currentTime }}</p>`
})
export class TimeComponent {
  currentTime = new Date().toLocaleTimeString();
}

A The template syntax is incorrect and does not bind currentTime properly.

B The component property currentTime is initialized too late, after pre-rendering.

C The Date object is not serializable during pre-rendering, so the value is lost.

D Angular pre-rendering runs in a Node environment without locale support, so toLocaleTimeString returns an empty string.

💡 Hint

Consider the environment where pre-rendering runs and how JavaScript date formatting behaves there.

Angular pre-rendering runs in a Node.js environment which may lack full locale data. Calling toLocaleTimeString() can return an empty string if locale support is missing, causing the rendered output to be empty.

📝 Syntax

advanced

Which option correctly configures Angular for pre-rendering static pages?

To pre-render Angular pages using Angular Universal, which configuration snippet is correct in angular.json?

A "prerender": { "builder": "@angular-devkit/build-angular:prerender", "options": { "browserTarget": "app:build", "serverTarget": "app:server" } }

B "prerender": { "builder": "@angular-devkit/build-angular:server", "options": { "browserTarget": "app:build" } }

C "prerender": { "builder": "@angular-devkit/build-angular:prerender", "options": { "browserTarget": "app:server", "serverTarget": "app:build" } }

D "prerender": { "builder": "@angular-devkit/build-angular:build", "options": { "browserTarget": "app:build", "serverTarget": "app:server" } }

💡 Hint

Check the builder name and targets for pre-rendering.

The correct builder for pre-rendering is @angular-devkit/build-angular:prerender. It requires both browserTarget and serverTarget to specify the client and server builds respectively.

🧠 Conceptual

expert

What is the main benefit of pre-rendering Angular pages compared to client-side rendering?

Choose the most accurate benefit of pre-rendering Angular pages as static HTML before serving to users.

A Pre-rendering eliminates the need for Angular's router to work on the client side.

B Pre-rendering allows Angular components to run faster in the browser by skipping change detection.

C Pre-rendering improves SEO and initial load speed by serving fully rendered HTML from the server.

D Pre-rendering automatically updates the page content in real-time without user interaction.

💡 Hint

Think about what users and search engines see first when loading a pre-rendered page.

Pre-rendering generates static HTML pages ahead of time, which improves SEO because search engines can index content easily. It also speeds up the initial page load since the browser receives ready-to-display HTML.