Recommended
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?
import { Component, signal } from '@angular/core'; @Component({ selector: 'app-greeting', standalone: true, template: ` <h1>{{ greeting() }}</h1> ` }) export class GreetingComponent { greeting = signal('Hello, Angular!'); }
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>.
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?
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.
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?
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(); }
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.
To pre-render Angular pages using Angular Universal, which configuration snippet is correct in angular.json?
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.
Choose the most accurate benefit of pre-rendering Angular pages as static HTML before serving to users.
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.