Pre-rendering static pages in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable pre-rendering in Angular.

Angular

export const prerenderConfig = { routes: ['[1]'] };

Drag options to blanks, or click blank then click option'

A/home

Bhome

C/api

Dindex.html

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the leading slash in the route path.

Using file names instead of route paths.

The routes array should contain paths starting with a slash for pre-rendering.

2fill in blank

medium

Complete the code to import the pre-rendering module in Angular.

Angular

import { [1] } from '@angular/platform-server';

Drag options to blanks, or click blank then click option'

ABrowserModule

BServerModule

CHttpClientModule

DAppModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing BrowserModule instead of ServerModule.

Using unrelated modules like HttpClientModule.

ServerModule is imported from '@angular/platform-server' to enable server-side rendering and pre-rendering.

3fill in blank

hard

Fix the error in the Angular pre-rendering configuration.

Angular

export const prerenderConfig = { routes: ['[1]'] };

Drag options to blanks, or click blank then click option'

Ahome

BHome

C/home

DHOME

Attempts:

3 left

💡 Hint

Common Mistakes

Using route paths without leading slash.

Using uppercase letters in route paths.

Routes must start with a slash '/' to be valid for pre-rendering.

4fill in blank

hard

Fill both blanks to configure Angular pre-rendering with routes and output path.

Angular

export const prerenderConfig = { routes: ['[1]'], outputPath: '[2]' };

Drag options to blanks, or click blank then click option'

A/about

Bdist/browser

Cdist/server

D/contact

Attempts:

3 left

💡 Hint

Common Mistakes

Using server folder as outputPath instead of browser.

Using route paths without leading slash.

The routes array should have valid route paths starting with '/'. The outputPath is usually 'dist/browser' for static files.

5fill in blank

hard

Fill all three blanks to set up Angular pre-rendering with routes, output path, and prerender builder.

Angular

export default { builder: '[1]', options: { routes: ['[2]'], outputPath: '[3]' } };

Drag options to blanks, or click blank then click option'

A@angular-devkit/build-angular:prerender

B/services

Cdist/static

D@angular-devkit/build-angular:server

Attempts:

3 left

💡 Hint

Common Mistakes

Using server builder instead of prerender builder.

Missing leading slash in routes.

Using wrong outputPath folder.

The builder for pre-rendering is '@angular-devkit/build-angular:prerender'. Routes need leading slashes. The outputPath is a folder for static files.