SEO benefits of SSR in Angular - Interactive Code Practice

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

Importing BrowserModule instead of ServerModule

Using HttpClientModule which is unrelated to SSR

Forgetting to import any server-related module

ServerModule is imported to enable Angular server-side rendering (SSR).

2fill in blank

medium

Complete the code to add Angular Universal for SSR in the app module.

Angular

@NgModule({ imports: [BrowserModule, [1]] }) export class AppModule {}

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

AHttpClientModule

BServerModule

CFormsModule

DRouterModule

Attempts:

3 left

💡 Hint

Common Mistakes

Adding BrowserModule twice

Adding unrelated modules like FormsModule

Not adding ServerModule at all

ServerModule is added to the imports to enable SSR with Angular Universal.

3fill in blank

hard

Fix the error in the Angular Universal server main file to bootstrap the server app.

Angular

export { AppServerModule } from './app/app.server.module';

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

if (process.env.NODE_ENV === 'production') {
  [1]();
}

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

AbootstrapModule

BdisableProdMode

CenableProdMode

DrenderModule

Attempts:

3 left

💡 Hint

Common Mistakes

Calling disableProdMode instead of enableProdMode

Trying to bootstrapModule here which is not correct

Not calling any function to enable production mode

enableProdMode() is called to turn on production optimizations for SSR.

4fill in blank

hard

Fill both blanks to create a server-side rendered Angular app with Express.

Angular

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

const app = express();

app.engine('html', [1]({ bootstrap: [2] }));

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

AngExpressEngine

BAppServerModule

CexpressEngine

DAppModule

Attempts:

3 left

💡 Hint

Common Mistakes

Using expressEngine which does not exist

Bootstrapping AppModule instead of AppServerModule

Mixing up engine and bootstrap parameters

ngExpressEngine is used as the engine, bootstrapping AppServerModule for SSR.

5fill in blank

hard

Fill all three blanks to improve SEO by pre-rendering Angular pages on the server.

Angular

app.get('*', (req, res) => {
  res.render('index', {
    req: req,
    res: res,
    [1]: true,
    [2]: 'en-US',
    [3]: 'My Angular SSR App'
  });
});

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

Apreboot

Blocale

CdocumentTitle

DserverSideRendering

Attempts:

3 left

💡 Hint

Common Mistakes

Using preboot which is unrelated here

Mixing up locale and documentTitle keys

Not enabling serverSideRendering flag

Setting serverSideRendering to true enables SSR, locale sets language, and documentTitle sets the page title for SEO.