Angular Universal overview - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Angular Universal module in a server-side app.

Angular

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

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

AServerModule

BBrowserModule

CHttpClientModule

DAppModule

Attempts:

3 left

💡 Hint

Common Mistakes

Using BrowserModule instead of ServerModule

Importing HttpClientModule which is unrelated here

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

2fill in blank

medium

Complete the code to bootstrap the Angular Universal server app.

Angular

export function app() {
  return express().engine('html', ngExpressEngine({
    bootstrap: [1]
  }));
}

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

AAppModule

BServerModule

CBrowserModule

DAppServerModule

Attempts:

3 left

💡 Hint

Common Mistakes

Using AppModule instead of AppServerModule

Using BrowserModule which is client-side only

The AppServerModule is the main module bootstrapped for Angular Universal server-side rendering.

3fill in blank

hard

Fix the error in the Angular Universal server setup by completing the missing import.

Angular

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

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

AAppServerModule

BAppModule

CServerModule

DBrowserModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing AppModule instead of AppServerModule

Importing BrowserModule which is client-side only

The AppServerModule must be imported from the server main file to set up Angular Universal correctly.

4fill in blank

hard

Fill both blanks to create a simple Express server using Angular Universal.

Angular

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

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

AngExpressEngine

BAppModule

CAppServerModule

DBrowserModule

Attempts:

3 left

💡 Hint

Common Mistakes

Using BrowserModule instead of AppServerModule

Using AppModule instead of AppServerModule

The ngExpressEngine is used as the template engine, and AppServerModule is bootstrapped for server-side rendering.

5fill in blank

hard

Fill all three blanks to complete the Angular Universal server listen setup.

Angular

server.listen([1], () => {
  console.log(`Node server listening on http://localhost:[2]`);
  [3];
});

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

A3000

Bport

Cprocess.exit()

Dconsole.log('Server started')

Attempts:

3 left

💡 Hint

Common Mistakes

Using process.exit() which stops the server immediately

Using a variable 'port' without defining it

The server listens on port 3000. The console logs a message confirming the server start.