Why SSR matters for Angular - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to enable server-side rendering in an Angular app.

Angular

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

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

AServerModule

BBrowserModule

CHttpClientModule

DRouterModule

Attempts:

3 left

💡 Hint

Common Mistakes

Using BrowserModule instead of ServerModule

Importing unrelated modules like HttpClientModule

The ServerModule is imported from '@angular/platform-server' to enable server-side rendering in Angular.

2fill in blank

medium

Complete the code to bootstrap the Angular app with server-side rendering.

Angular

platformServer().bootstrapModule([1]);

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

AAppModule

BServerModule

CBrowserModule

DAppServerModule

Attempts:

3 left

💡 Hint

Common Mistakes

Bootstrapping AppModule instead of AppServerModule

Using BrowserModule in server bootstrap

The AppServerModule is the Angular module configured for server-side rendering and should be bootstrapped on the server.

3fill in blank

hard

Fix the error in the Angular Universal server main file to correctly import the server module.

Angular

import { [1] } from './app/app.server.module';

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

AServerModule

BAppModule

CAppServerModule

DBrowserModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing AppModule instead of AppServerModule

Importing BrowserModule in server code

The correct import for the server main file is AppServerModule from the server module file.

4fill in blank

hard

Fill both blanks to create a simple Angular Universal express server that handles requests.

Angular

import * as express from 'express';
import { ngExpressEngine } from '@nguniversal/express-engine';
import { [1] } from './src/main.server';

const app = express();
app.engine('html', ngExpressEngine({ bootstrap: [2] }));

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

AAppServerModule

BAppModule

CAppServerModuleNgFactory

DServerModule

Attempts:

3 left

💡 Hint

Common Mistakes

Using AppModule instead of AppServerModule

Using factory versions which are outdated

Both blanks should be AppServerModule to correctly set up the Angular Universal express engine.

5fill in blank

hard

Fill all three blanks to complete the Angular Universal server setup with rendering and static file serving.

Angular

app.get('*.*', express.static('[1]', {
  maxAge: '[2]'
}));

app.get('*', (req, res) => {
  res.render('index', { req, providers: [
    { provide: '[3]', useValue: req }
  ] });
});

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

Adist/browser

B1y

CREQUEST

Dsrc/assets

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong folder for static files

Incorrect cache maxAge format

Not providing the REQUEST token

The static files are served from dist/browser with a cache max age of 1y. The Angular Universal server injects the REQUEST token for the current request.