Angular 4/5/6 CLI + Angular Universal Setup Steps

Warning: strpos(): Empty needle in /home/javadomain/public_html/wp-content/plugins/easy-table-of-contents/includes/ on line 450

Angular 4 CLI + Angular Universal Setup Steps:

Angular universal is superb component for angular projects for server side rendering, which really resolves SEO related issues to the great extend. But setting up a angular universal will become little complex if you try after developing your complete applications. Because some of the component you used in your angular 4 project may not have a proper configuration to support angular universal.


So I highly recommend to run angular universal beginning itself and ensure whenever you add a new third party component run and ensure nothing has been reported by angular universal for the new component added.

1. Create New Angular 4 CLI project

ng new czc-user-universal

Note: Ensure you have angular-cli version greater than 1.3 (in my case it is “@angular/cli”: “1.4.3”, and 1.0.1 it did not work).


If you have 1.0.1 or less version then run the below command,

npm install @angular/cli@latest


2. Update “scripts” in package.json [prestart & start]:


[plain highlight=”6,7″]
“name”: “czc-user-universal”,
“version”: “0.0.0”,
“license”: “MIT”,
“scripts”: {
“prestart”: “ng build –prod && ngc”,
“start”: “ts-node src/server.ts”
“private”: true,
“dependencies”: {
“@angular/animations”: “^4.2.4”,
“@angular/common”: “^4.2.4”,
“@angular/compiler”: “^4.2.4”,
“@angular/core”: “^4.2.4”,
“@angular/forms”: “^4.2.4”,
“@angular/http”: “^4.2.4”,
“@angular/platform-browser”: “^4.2.4”,
“@angular/platform-browser-dynamic”: “^4.2.4”,
“@angular/router”: “^4.2.4”,
“core-js”: “^2.4.1”,
“rxjs”: “^5.4.2”,
“zone.js”: “^0.8.14”
“devDependencies”: {
“@angular/cli”: “1.4.3”,
“@angular/compiler-cli”: “^4.2.4”,
“@angular/language-service”: “^4.2.4”,
“@types/jasmine”: “~2.5.53”,
“@types/jasminewd2”: “~2.0.2”,
“@types/node”: “~6.0.60”,
“codelyzer”: “~3.1.1”,
“jasmine-core”: “~2.6.2”,
“jasmine-spec-reporter”: “~4.1.0”,
“karma”: “~1.7.0”,
“karma-chrome-launcher”: “~2.1.1”,
“karma-cli”: “~1.0.1”,
“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”: “~3.2.0”,
“tslint”: “~5.3.2”,
“typescript”: “~2.3.3”



3. Add “angularCompilerOptions” to tsconfig.json


“compileOnSave”: false,
“compilerOptions”: {
“outDir”: “./dist/out-tsc”,
“sourceMap”: true,
“declaration”: false,
“moduleResolution”: “node”,
“emitDecoratorMetadata”: true,
“experimentalDecorators”: true,
“target”: “es5”,
“typeRoots”: [
“lib”: [
“genDir”: “./dist/ngfactory”,
“entryModule”: “./src/app/app.module#AppModule”



4. Add “server.ts” to “exclude” in


“extends”: “../tsconfig.json”,
“compilerOptions”: {
“outDir”: “../out-tsc/app”,
“baseUrl”: “./”,
“module”: “es2015”,
“types”: []
“exclude”: [



5. Update app.module.ts -BrowserModule.withServerTransition


import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { AppComponent } from ‘./app.component’;
declarations: [
imports: [
BrowserModule.withServerTransition({appId: ‘czc-user-universal’})
providers: [],
bootstrap: [AppComponent]

export class AppModule { }



6. create app.server.module.ts under app folder [New File]:


import { NgModule } from ‘@angular/core’;
import { ServerModule } from ‘@angular/platform-server’;
import { AppModule } from ‘./app.module’;
import { AppComponent } from ‘./app.component’;
imports: [
bootstrap: [AppComponent]

export class AppServerModule { }



Important Note:


If you get

“cannot find module ”@angular/platform-server’.” then you need to install
platform-server as well which can be done using the below command,

npm install –save @angular/platform-server

Also install @angular/animations

npm install –save @angular/animations



In single command,

npm install –save @angular/platform-server @angular/animations


If you face still some issue then try with @latest


npm install –save @angular/platform-server@latest @angular/animations@latest




7. create a server.ts file under src and paste the following [New]:


import ‘reflect-metadata’;
import ‘zone.js/dist/zone-node’;
import { platformServer, renderModuleFactory } from ‘@angular/platform-server’
import { enableProdMode } from ‘@angular/core’
import { AppServerModuleNgFactory } from ‘../dist/ngfactory/src/app/app.server.module.ngfactory’
import * as express from ‘express’;
import { readFileSync } from ‘fs’;
import { join } from ‘path’;

const PORT = 4000;
const app = express();
let template = readFileSync(join(__dirname, ‘..’, ‘dist’, ‘index.html’)).toString();
app.engine(‘html’, (_, options, callback) => {
const opts = { document: template, url: options.req.url };
renderModuleFactory(AppServerModuleNgFactory, opts)
.then(html => callback(null, html));
app.set(‘view engine’, ‘html’);
app.set(‘views’, ‘src’)
app.get(‘*.*’, express.static(join(__dirname, ‘..’, ‘dist’)));
app.get(‘*’, (req, res) => {
res.render(‘index’, { req });
app.listen(PORT, () => {
console.log(`listening on http://localhost:${PORT}!`);



You have successfully completed setting up angular universal with angular 4 CLI.


Run the below command,

npm run start


And you will be able to see something similar to this,

Angular 4 CLI + Angular Universal Setup Steps

Now open and run your application at http://localhost:4000, now your app will be appeared from server. So no more SEO and prerendering default app works! text.

You may get the below error sometime,

ERROR { Error: Uncaught (in promise): ReferenceError: System is not defined
ReferenceError: System is not defined

If so, try running the below command because the above error can occur due to router loaders and it resolves after you add this dependency.

npm install angular2-router-loader — save-dev



 1,916 total views,  4 views today

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.