Universal Angular for SSR in Angular 8

Share It

We know in default Angular App is not SEO friendly. In this post we will walk through how we can make our angular app SEO friendly using server side rendering (SSR) using Universal Angular.

Why use Server Side Rendering (SSR)?

There are 3 reasons for create angular application with server side rendering.

  • Web crawlers through search engine optimization (SEO).
  • Improve performance on mobile.
  • Show the first page quickly.

Step 1: Install the Angular CLI

Install the angular cli globaly using npm, open a terminal or console using following command for creating angular project.

Note: If already installed angular cli then skip step 1.

Must be ensure before installation of angular cli nodejs should be installed.

npm install -g @angular/cli

Step 2: Create Application

Create an application using below command.

ng new mproject

Step 3: Add Angular Universal in Your Application

Angular Universal, a technology that renders Angular applications on the server. Install Angular Universal using following command.

ng add @nguniversal/express-engine --clientProject mproject

The command create following files.

  main.server.ts             * bootstrapper for server app
  app/ ...                   application code
    app.server.module.ts     * server-side application module
server.ts                    * express web server
tsconfig.server.json         * TypeScript server configuration
webpack.server.config.js     * webpack server configuration

Step 4: Run This Application

You can run Server Side Application using following commands.

npm run build:ssr
npm run serve:ssr

Open a browser and navigate to http://localhost:4000/ for access this application.

This application working as nodejs project. You can also run this project using following command.

node dist/server

Check This Application SEO Friendly

You can check this application SEO friendly. You can access your application using following commands. And Google access your web application pages someting like this.

curl http://localhost:4000

Change Port in SSR Angular Application

If you want to change port in Server Side Rendered Angular Application then edit server.ts file and go to line no 90 const PORT = process.env.PORT || 4000; and chagne 4000 to 4005 (as you want).

 * If your application uses third-party dependencies, you'll need to
 * either use Webpack or the Angular CLI's `bundleDependencies` feature
 * in order to adequately package them for use on the server without a
 * node_modules directory.
 * However, due to the nature of the CLI's `bundleDependencies`, importing
 * Angular in this file will create a different instance of Angular than
 * the version in the compiled application code. This leads to unavoidable
 * conflicts. Therefore, please do not explicitly import from @angular or
 * @nguniversal in this file. You can export any needed resources
 * from your application's main.server.ts file, as seen below with the
 * import for `ngExpressEngine`.

import 'zone.js/dist/zone-node';

import * as express from 'express';
import {join} from 'path';

// Express server
const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist/browser');

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const {AppServerModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap} = require('./dist/server/main');

// Our Universal express-engine (found @
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [

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

// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => { });
// Serve static files from /browser
app.get('*.*', express.static(DIST_FOLDER, {
  maxAge: '1y'

// All regular routes use the Universal engine
app.get('*', (req, res) => {
  res.render('index', { req });

// Start up the Node server
app.listen(PORT, () => {
  console.log(`Node Express server listening on http://localhost:${PORT}`);


In this tutorial we have learnt how to run Angular 8 application on the server using Angular Universal. And how to make Angular application SEO friendly and change port of this application.

Share It