Angular server side rendering by using Angular-CLI

posted on

April 9, 2018

In this tutorial, we are going to learn how to integrate your Angular-CLI application with Angular Universal.
Before going into the actual coding part, lets understand what exactly Angular Universal is and how it works.

These days websites are amazing, they are rich and using a lots of Javascript code to generate their pages. Mostly Single page applications (SPA) frameworks are probably getting attention in the Javascript Market in the past years. Handling most of the data processing on the client side, boiler-plating the content on every page, maintaining the “state”, and omitting the overhead latency on switching pages are just some of its net benefits.

But, we have got a small problem, the application has to be indexed by Search engines.
Many search engines and social networks expect plain HTML to utilise the meta tags and relevant page contents. They can not determine when the javascript framework completes rendering the page. As a result they get served with the incomplete HTML content which is very useless to them. This behaviour even gets more painful when you people try to share the website link and you see an image like the one below when they do.

seo-broken-img
image is taken from https://scotch.io/

So, to address this, our application has to be rendered on the server side as well for search engines and social networks. SSR is a reliable, flexible and efficient way to ensure all search engines & social networks can access your content. Here comes the Angular Universal.

What is Angular Universal?

Angular Universal is the standalone project the Angular team is working on to make building universal apps a smooth experience. Its main purpose is to allow server to process angular code and templates. It loads our app on the server first, and then drops it to the browser once ready.

Here are some benefits of adding universal(SSR) into our app.

Facilitate web crawlers (SEO) – All your routes are crawlable and understandable for search engines and social networks.
First time users of your application will instantly see a server rendered view which greatly improves perceived performance and the overall user experience.
All the first HTTP requests are made on the server side and users should not wait for them on the client-side.
Improves performance on mobile and low-powered devices

The below video demonstrates the difference of initial page rendering and perceived page load time when SSR (aka Angular Universal) is used. The SSR version on the other hand, the users will instantly see a server rendered view.

Screen capture demonstrating the difference in initial page rendering and perceived page load times for non SSR (left) and SSR (right).

Getting Started

Generate a new project using Angular CLI

$ npm install -g @angular/cli
$ ng new angular-server-side-rendering

1 2	$ npm install -g @angular/cli $ ng new angular-server-side-rendering

Install the following dependencies for SSR

$ npm install --save @angular/platform-server @nguniversal/express-engine reflect-metadata

1	$ npm install --save @angular/platform-server @nguniversal/express-engine reflect-metadata

Prepare our app for server side rendering (path: src/app/app.module.ts)

First we need to call BrowserModule.withServerTransition method. This method will tells angular, that we are using server side rendering and it expects an object with a key called appId. You can enter any string here.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // Add .withServerTransition() to support Universal rendering.
    // The application ID can be any identifier which is unique on
    // the page.
    BrowserModule.withServerTransition({
      appId: 'my-app-id'
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

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

import { AppComponent } from './app.component';

@NgModule({

declarations: [

AppComponent

imports: [

// Add .withServerTransition() to support Universal rendering.

// The application ID can be any identifier which is unique on

// the page.

BrowserModule.withServerTransition({

appId: 'my-app-id'

})

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Next, create a app.server.module.ts which is similar like app.module.ts file
path: src/app/app.server.module.ts

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule
  ],
  bootstrap: [ AppComponent ]
})
export class AppServerModule { }

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

import { ServerModule } from '@angular/platform-server';

import { AppModule } from './app.module';

import { AppComponent } from './app.component';

@NgModule({

imports: [

AppModule,

ServerModule

bootstrap: [ AppComponent ]

})

export class AppServerModule { }

Create a main.server.ts file in this path src/main.server.ts to export our server module.

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

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

Next, create tsconfig.server.json file for the server in this path src/tsconfig.server.json

Just copy the contents of tsconfig.app.json file to tsconfig.server.json file and change “module” to “commonjs” and add angularCompilerOptions code and set entryModule to AppServerModule.

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    /* For now, Node only understand CommonJS modules, so you can't stick to es2015 here */
    "module": "commonjs",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
"angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule"
  }
}

{

"extends": "../tsconfig.json",

"compilerOptions": {

"outDir": "../out-tsc/app",

"baseUrl": "./",

/* For now, Node only understand CommonJS modules, so you can't stick to es2015 here */

"module": "commonjs",

"types": []

"exclude": [

"test.ts",

"**/*.spec.ts"

"angularCompilerOptions": {

"entryModule": "app/app.server.module#AppServerModule"

}

Create a second app for server in the CLI

We need to tell the CLI about all the changes, we have made, for it to work properly. Furthermore, we are going to create a second profile for the server bundle. The cli will then generate that bundle, containing only the code we require on the server for rendering.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "angular-server-side-rendering"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    },
   /* create a second profile for the server bundle here. */
    {
      "platform": "server",
      "root": "src",
      "outDir": "dist-server",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.server.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.server.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

{

"$schema": "./node_modules/@angular/cli/lib/config/schema.json",

"project": {

"name": "angular-server-side-rendering"

"apps": [

{

"root": "src",

"outDir": "dist",

"assets": [

"assets",

"favicon.ico"

"index": "index.html",

"main": "main.ts",

"polyfills": "polyfills.ts",

"test": "test.ts",

"tsconfig": "tsconfig.app.json",

"testTsconfig": "tsconfig.spec.json",

"prefix": "app",

"styles": [

"styles.css"

"scripts": [],

"environmentSource": "environments/environment.ts",

"environments": {

"dev": "environments/environment.ts",

"prod": "environments/environment.prod.ts"

}

/* create a second profile for the server bundle here. */

{

"platform": "server",

"root": "src",

"outDir": "dist-server",

"assets": [

"assets",

"favicon.ico"

"index": "index.html",

"main": "main.server.ts",

"test": "test.ts",

"tsconfig": "tsconfig.server.json",

"testTsconfig": "tsconfig.spec.json",

"prefix": "app",

"styles": [

"styles.css"

"scripts": [],

"environmentSource": "environments/environment.ts",

"environments": {

"dev": "environments/environment.ts",

"prod": "environments/environment.prod.ts"

}

"e2e": {

"protractor": {

"config": "./protractor.conf.js"

}

"lint": [

{

"project": "src/tsconfig.app.json",

"exclude": "**/node_modules/**"

{

"project": "src/tsconfig.spec.json",

"exclude": "**/node_modules/**"

{

"project": "e2e/tsconfig.e2e.json",

"exclude": "**/node_modules/**"

}

"test": {

"karma": {

"config": "./karma.conf.js"

}

"defaults": {

"styleExt": "css",

"component": {}

}

Now, lets the CLI create our bundles, run the following command to see if it builds correctly.

/* Build the client bundle and server bundle */
$ ng build --prod && ng build --prod --app 1 --output-hashing=none

1 2	/* Build the client bundle and server bundle */ $ ng build --prod && ng build --prod --app 1 --output-hashing=none

The above command will produce “dist” and “dist-server” folders in our root directory. Here you can see we added output-hashing to none to the server bundle. It’s important here, this generates a clean (main.bundle.js) file without any hash.

This (main.bundle.js) file exports module called AppServerModuleNgFactory that we are going to load in our server.js file. This is the module we can use to pre-render the whole thing.

Now lets create our server.js file in the root directory.

require('zone.js/dist/zone-node');
require('reflect-metadata');
const express = require('express');
const { enableProdMode } = require('@angular/core');
const { ngExpressEngine } = require('@nguniversal/express-engine');
const { AppServerModuleNgFactory } = require(`./dist-server/main.bundle`);

enableProdMode();

function angularRouter(req, res) {
  res.render('index', {req, res});
}
const app = express();
const port = 3000;

/* Root route before static files, or it will serve a static index.html, without pre-rendering */
app.get('/', angularRouter)

// set the engine
app.engine('html', ngExpressEngine({
    bootstrap: AppServerModuleNgFactory
  })
);

app.set('view engine', 'html');
app.set('views', 'dist');

// to serve our static files.
app.use(express.static(`${__dirname}/dist`));


// direct all routes to index.html
app.get('*', angularRouter);

app.listen(port, () => {
  console.log(`Listening on http://localhost:${port}`);
});

require('zone.js/dist/zone-node');

require('reflect-metadata');

const express = require('express');

const { enableProdMode } = require('@angular/core');

const { ngExpressEngine } = require('@nguniversal/express-engine');

const { AppServerModuleNgFactory } = require(`./dist-server/main.bundle`);

enableProdMode();

function angularRouter(req, res) {

res.render('index', {req, res});

}

const app = express();

const port = 3000;

/* Root route before static files, or it will serve a static index.html, without pre-rendering */

app.get('/', angularRouter)

// set the engine

app.engine('html', ngExpressEngine({

bootstrap: AppServerModuleNgFactory

})

);

app.set('view engine', 'html');

app.set('views', 'dist');

// to serve our static files.

app.use(express.static(`${__dirname}/dist`));

// direct all routes to index.html

app.get('*', angularRouter);

app.listen(port, () => {

console.log(`Listening on http://localhost:${port}`);

});

Now our server.js is ready. lets add some scripts to our package.json to build our project.

{
  "name": "angular-server-side-rendering",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:universal": "ng build --prod &amp;&amp; ng build --prod -app 1 --output-hashing=none",
    "serve:universal": "npm run build:universal &amp;&amp; node server"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/platform-server": "^5.2.9",
    "@angular/router": "^5.2.0",
    "@nguniversal/express-engine": "^5.0.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.12",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.0",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}

{

"name": "angular-server-side-rendering",

"version": "0.0.0",

"license": "MIT",

"scripts": {

"ng": "ng",

"start": "ng serve",

"build": "ng build --prod",

"test": "ng test",

"lint": "ng lint",

"e2e": "ng e2e",

"build:universal": "ng build --prod && ng build --prod -app 1 --output-hashing=none",

"serve:universal": "npm run build:universal && node server"

"private": true,

"dependencies": {

"@angular/animations": "^5.2.0",

"@angular/common": "^5.2.0",

"@angular/compiler": "^5.2.0",

"@angular/core": "^5.2.0",

"@angular/forms": "^5.2.0",

"@angular/http": "^5.2.0",

"@angular/platform-browser": "^5.2.0",

"@angular/platform-browser-dynamic": "^5.2.0",

"@angular/platform-server": "^5.2.9",

"@angular/router": "^5.2.0",

"@nguniversal/express-engine": "^5.0.0",

"core-js": "^2.4.1",

"reflect-metadata": "^0.1.12",

"rxjs": "^5.5.6",

"zone.js": "^0.8.19"

"devDependencies": {

"@angular/cli": "~1.7.0",

"@angular/compiler-cli": "^5.2.0",

"@angular/language-service": "^5.2.0",

"@types/jasmine": "~2.8.3",

"@types/jasminewd2": "~2.0.2",

"@types/node": "~6.0.60",

"codelyzer": "^4.0.1",

"jasmine-core": "~2.8.0",

"jasmine-spec-reporter": "~4.2.1",

"karma": "~2.0.0",

"karma-chrome-launcher": "~2.2.0",

"karma-coverage-istanbul-reporter": "^1.2.1",

"karma-jasmine": "~1.1.0",

"karma-jasmine-html-reporter": "^0.2.2",

"protractor": "~5.1.2",

"ts-node": "~4.1.0",

"tslint": "~5.9.1",

"typescript": "~2.5.3"

}

build:universal will first build the client app, then build the server app.
serve:universal runs the build:universal command first, then runs the server.

Lets run the npm run serve:universal command from root directory.Now, the server will be listening on http://localhost:3000.

Browse this http://localhost:3000 link and inspect the page and click on the view page source to see the rendered html by the server.

Basically, when you run ng serve command, your application will render on the client side, but when you run npm run serve:universal command, the application actually renders at server side(not a browser), and thats how search engines and social networks understands your content.

Thats it. You can refer the below github link to see the full code.
https://github.com/sivagrid/angular-server-side-rendering