Introduction to Guide to Angular Universal

Angular Universal and the Era of Single-Page Applications

This lesson answers the questions "What do I need to accomplish the course?" "What software is needed?" "What should I know about Angular and other technologies?" "What should I do to accomplish the course offline?"

Course prerequisites

Introduction

In this course module, you will build a production-ready Angular application. It will consist of a list of products with pictures, descriptions, and prices. Each product will have a dedicated landing page. You will also develop the functionality of adding products to a list of favorites and displaying that list. You will build a back-end and API to feed your application with data. The data will be retrieved from MongoDB provisioned in your Heroku application.

How Does Angular Work with Heroku and MongoDB?

Most projects start from scratch. This one is not an exception. In this lesson you will initialize the Angular application using CLI, include the Cascading StyleSheet, set up routing and basic components.

How to Install Angular From the CLI and Add Bootstrap CSS

In this lesson you will prepare the application backend an entry gate for communicating with persistance layer and hosting Angular application bundle.

How to Build and Run an Angular Backend to Test Locally

Every application needs a persistence layer. This lesson will show you how to enroll for free Atlas cloud MongoDB instance. You will also feed your database with data.

How to Install MongoDB Locally and Import JSON Data

Once the database is set up and ready, you need to establish a connection with it. That's what you're going to do in this part of the course. Apart of that you will create backend API to get list of products and their descriptions.

How to Build a MongoDB REST API to Fetch Data

We're building software for people, and we need to give them a way to communicate with it. This lesson will show you how to prepare an API for user interaction like loging in and adding products to list of favorites. Moreover you will be introduced to the security essentials like cookies encryption and password hashing.

Build MongoDB API With Encryption for PII Data and Auth

When the backend is ready, it's time for frontend. In this lesson you will integrate user API with Angular. You will implement the user authentication flow.

How to Add User Authentication to Angular With MongoDB API

Our application would be nothing without the data. In this course part you will display products images, description and prices in your Angular application.

How to Fetch Data From MongoDB and Display it in Angular

Every journey has some end. At the end of software development is production. It's time to deploy your application to Heroku and test with multiple tools how it performs.

How to Deploy an Angular App and Watch Performance

Building the app

In the previous module, you've built a fully functional production-ready application. Unfortunately, like other single-page applications, this application has its weaknesses. In this module, you will learn how to address one of them and render HTML content on the server.

Angular Universal

The easiest way to enhance your Angular project with new functionalities is to use Schematics - a set of instruction for CLI on how to change the project and install new dependencies. Let's do that with Angular Universal and review what Schematics did for us.

Server-Side Rendering With Angular Universal Schematics

Once the application is said to be SEO friendly and performance optimized by schemtaics - let's check that in battlefield. In this lesson you will deploy your project to Heroku and measure its performance.

How to Measure Performance - Angular vs Angular Universal

Unfortunately, schematics are not a magic wand and they won't solve all of your problems. Sometimes your project needs to be adjusted to do not break Server-Side Rendering process. Here's what might go wrong, and how to address that.

How to Add Internationalization to Angular With i18n

In this lesson, you will add even more for SEO. Your application deserves robots.txt and proper sitemap.

How to Add Sitemap.xml and Robots.txt to an Angular App

Next step in SEO is to set up meta-tags. If you want to know how to do it in Angular, this lesson will help you to find the answer.

How to Optimize Angular SEO With Title and Meta Tags

In this lesson, you can see how Angular Universal helps when your user's browser doesn't support JavaScript

Noscript

Applying Angular Universal

In this course module, you will learn how to pass objects and function references from Node.js to Angular Universal sandbox. You will build a service that will be used to connect with MongoDB and perform queries. You will also gain knowledge on how to prepare a server-equivalent of services used in browser-side Angular; and how to improve your application performance thanks to them. You will also make your application fully functional for users with disabled JavaScript.

Retrieve MongoDB Data in Angular Universal With Secrets

One of possible improvements is to perform queries against MongoDB directly from Angular Universal. In this lesson you will create a service which does this job.

How to Query MongoDB from Angular Universal

Once your MongoService is in place, you need to prepare a server-equivalent of ProductsService. This service will query MongoService for products list and descriptions and embed those in the HTML rendered by Angular Universal.

How to Build Server-Specific Services in Angular Universal

Next step is to create a server-equivalent of service responsible for user interactions. This lesson will show you how to read HTTP requests in Angular, get cookies from it and decrypt them.

How to Read HTTP Requests With Cookies in Angular

Once you know how to read cookies in the Angular Universal app, it's time to learn how to set them up. In this lesson, you will make your application fully functional for users whose browser doesn't support JavaScript at all.

How to Make Angular Functional With JavaScript Disabled

Browser vs. Server

Say Hello to TransferState, a key-value registry that is passed along with the application bundle, from the server-side angular to the browser-side part of the application. In this lesson you will learn how frontend can get to know what backend has already do (ie retrieving data from DB); thanks to that you can avoid repeating those steps and offload your application backend.

Send Server Data to Client With Angular TransferState

Next step is to get know a TransferHttpCacheModule, which provides the TransferState functionality "out of the box" for the HTTP calls.

Perform Angular HTTP Calls With TransferHttpCacheModule

Long running API calls can affect your application rendering time, that might lead to the SEO disaster. In this lesson you will learn how you can protect your application against such situation.

How to Handle Slow API Calls in Angular

In this module, you've learned how to pass data between the server and the browser using the `TransferState` registry. You've also introduced `TransferHttpCacheModule` that passes data obtained via HTTP during server-side rendering to the browser. You've learned how to abandon long-running REST API calls that affect rendering performance.

Summary

Transfering data between server and browser

Wanna be a performance beast? It's time to cache! In this module, you will use the Redis database to implement server-side caching and improve Time To First Byte. From now on, only selected requests will trigger the rendering process. The rendered output will be kept in Redis for a specified period of time. Subsequent requests will be served with data retrieved from Redis.

Module Overview

First things first. Let's install the Redis DB on your machine and provision it in the Heroku environment.

How to Install Redis CLI on Windows, Mac, and Heroku

In this lesson you will create a Node.JS middle-ware, that will be responsible for caching rendered views inside Redis database.

How to Cache Angular With Redis Node.js Middleware

Faster! Faster! Faster! In this lesson you will enable gzip compression, defer the CSS, lazy-load images and more. All to make it faster!

5 Angular Performance Optimization Tips

Caching with Redis

How to verify your application behavior in different environments? In this lesson you will get to know how you can stub the PLATFORM_ID injection token and HTTP request, for tests purpose.

How to Mock PLATFORM_ID Value for Angular Unit Testing

Next step is to simulate a long-running API and verify how server-side Angular deals with it. This lesson will demonstrate you how to do that.

How to Unit Test Slow API Calls in Angular

Last but not least of your unit tests, should be to verify the server-specific services. In this lesson you will learn how to enforce Karma to run tests against code that includes server-specific objects and libraries.

How to Unit Test Server-Side Services in Angular Karma

In this lesson you will learn how you can verify the TransferState registry content in your E2E tests.

Build Angular End-to-End Unit Tests With TransferState

This lesson is going to show you how to mock your data-source - MongoDB - for the E2E tests purpose. Thanks to using mongo-unit you will be able to perform actions that changes data in your DB, during E2E testing.

How to Mock MongDB for Angular End-to-End Unit Tests

Testing

In this module, you'll learn how to adjust the Angular application to be pre-renderable. Such prepared application can be deployed on static hosting like GitHub pages and still be SEO friendly! You will feed your application with data retrieved from MongoDB during the prerendering process.

Prerendering in Angular

What is prerendering and how Angular Universal supports it? This lesson will answer that questio and show you what steps you need to take, to make your application prerenderable.

How to Resolve Angular Prerendering Issues

Prerendering

That was a bumpy ride, but definetely worth it. In this lesson we will summarize what you've learned so far and how ng --prod differentiate from Universal and Prerendered application.

Angular --prod Universal Versus Prerender

angular

angular-cli

In this course, we'll create a complete Angular application that is Server-Side-Rendered with Angular Universal.

The application will be optimized for the best possible performance and will be tuned for real-world production use. For example, we'll use Redis for server-side caching, create protected routes, and get great SEO benefits with a snappy user experience.

![](https://s3.amazonaws.com/assets.fullstack.io/n/20201111013120117_features%402x.png)

This course is 40+ lessons where we walk through a step-by-step tutorial to optimize an Angular app from a [Lighthouse score](https://web.dev/performance-scoring/) of 66 (the default) to a blazing-fast score of 95 (!)

The problem with "normal" Angular apps is that they don't run until our user has downloaded the entire application - but with SSR, we'll _render our Angular app on the server_.

**The result is that your app will load super-fast, you'll improve your SEO, you will delight your users.**

Along the way, we'll learn production deployment techniques like:

* how to use a CDN (Content Delivery Network) for global performance and 
* how to deploy to Heroku and retrieve data from a MongoDB database
* How to measure and improve metrics like time-to-first-byte and time to first-contentful-paint
* How to add data like internationalization with SSR
* How to manage **security** and **secrets** in your SSR build
* How **fetch server-side queries from the database**
* How to use `TransferState` to eliminate duplicate client-side queries
* How to _test_ server-side rendered apps
* How to pre-render static pages

By the end of this course you'll understand how to create Angular apps with real-world, production-level performance.

Master Production-Ready SSR and Deployments with Angular

In this course I'll show you how to enhance existing Angular application with Angular Universal, how to optimize its performance and what are Server-Side Rendering best practices. You'll see how to improve PageSpeed Insights score from 66 to 95 points!

The newline Guide to Angular Universal

How to make SEO friendly Angular application

What problems Angular Universal can solve

How to integrate Angular Universal application with MongoDB and Redis cache

Preparing server-specific Angular services and logic paths in the server and browser common code

How to create transfer data between server and browser using TransferState

Importance of optimizing server-side REST calls

How to manipulatie Angular application <title> and <meta> tags

How to Unit test and e2e test Angular Universal application

How to prepare your application for prerendering

Starting your adventure with Angular Universal is as simple as applying a single command using the Angular CLI. Navigate to your project root directory and type the following in the terminal:

Angular CLI will install all the necessary dependencies for you and apply schematics (a set of instructions on how to adjust the project). After applying the schematics, you should see the summary output of what has been changed, added, or deleted in your project:

 file. Angular CLI has installed new dependencies there that are necessary to run Angular in the Node.js runtime environment:

@angular/platform-server
@nguniversal/express-engine
@nguniversal/builders
@types/express

  "scripts": {
    "ng": "ng",
    "start": "node dist/backend/backend.js",
    "build": "ng build --prod && npm run build:backend",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:backend": "tsc --project tsconfig.backend.json",
    "dev:ssr": "ng run my-universal-app:serve-ssr",
    "serve:ssr": "node dist/my-universal-app/server/main.js",
    "build:ssr": "ng build --prod && ng run my-universal-app:server:production",
    "prerender": "ng run my-universal-app:prerender"
  },

Angular CLI has added the following new scripts:

Under the hood, the scripts described above use a set of builders added to your project. You can find them in the 

        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/my-universal-app/server",
            "main": "server.ts",
            "tsConfig": "tsconfig.server.json"
          },
          "configurations": {
            "production": {
              "outputHashing": "media",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "sourceMap": false,
              "optimization": true
            }
          }
        },
        "serve-ssr": {
          "builder": "@nguniversal/builders:ssr-dev-server",
          "options": {
            "browserTarget": "my-universal-app:build",
            "serverTarget": "my-universal-app:server"
          },
          "configurations": {
            "production": {
              "browserTarget": "my-universal-app:build:production",
              "serverTarget": "my-universal-app:server:production"
            }
          }
        },
        "prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "browserTarget": "my-universal-app:build:production",
            "serverTarget": "my-universal-app:server:production",
            "routes": [
              "/"
            ]
          },
          "configurations": {
            "production": {}
          }
        }

As you can see, the server-side rendering build will use a new entry point to your application, 

 file is where the Node.js application resides.

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

import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';

import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';

// The Express app is exported so that it can be used by serverless Functions.
export function app() {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/my-universal-app/browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
  }));

  server.set('view engine', 'html');
  server.set('views', distFolder);

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

  // All regular routes use the Universal engine
  server.get('*', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });

  return server;
}

function run() {
  const port = process.env.PORT || 4000;

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

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
  run();
}

export * from './src/main.server';

 function. It returns an Express.js application called 

 - this is where HTTP request handlers reside. The 

 to generate HTML, which is the essence of Angular Universal. 

 bootstraps the Angular framework using the 

. That's the entry point of the application. All that logic is handled under the 

, that is responsible for hosting all other assets that the browser will request for:

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

import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

export { AppServerModule } from './app/app.server.module';
export { renderModule, renderModuleFactory } from '@angular/platform-server';

---
title: Server-Side Rendering With Angular Universal Schematics
isPublicLesson: false
description: The easiest way to enhance your Angular project with new functionalities is to use Schematics - a set of instruction for CLI on how to change the project and install new dependencies. Let's do that with Angular Universal and review what Schematics did for us.
code: https://gitlab.com/fullstackio/books/newline-course-apps/maciej-treder-guide-to-angular-universal-app/-/tree/main/code/module_03/lesson_03.08/App/downloads/module2/my-universal-app?ref_type=heads
---

## Applying schematics

Starting your adventure with Angular Universal is as simple as applying a single command using the Angular CLI. Navigate to your project root directory and type the following in the terminal:

```bash
ng add @nguniversal/express-engine
```

Angular CLI will install all the necessary dependencies for you and apply schematics (a set of instructions on how to adjust the project). After applying the schematics, you should see the summary output of what has been changed, added, or deleted in your project:

![](https://d2uusema5elisf.cloudfront.net/courses/newline-guide-to-angular-universal/module_03/lesson_03.02/public/assets/schematics.jpg)

Let's review these changes.

### Dependencies and scripts

The backbone of your project is the `package.json` file. Angular CLI has installed new dependencies there that are necessary to run Angular in the Node.js runtime environment:

```bash
@angular/platform-server
@nguniversal/express-engine
@nguniversal/builders
@types/express
```

Another change is in the `scripts` section:

```json { actualFilename=./public/src/package.json endLine=16 startLine=4 statedFilename=package.json url=https&#x3A;//gitlab.com/fullstackio/books/guide-to-angular-universal/module_03/lesson_03.02/public/src/package.json#L4 }
  "scripts": {
    "ng": "ng",
    "start": "node dist/backend/backend.js",
    "build": "ng build --prod && npm run build:backend",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:backend": "tsc --project tsconfig.backend.json",
    "dev:ssr": "ng run my-universal-app:serve-ssr",
    "serve:ssr": "node dist/my-universal-app/server/main.js",
    "build:ssr": "ng build --prod && ng run my-universal-app:server:production",
    "prerender": "ng run my-universal-app:prerender"
  },
```

Angular CLI has added the following new scripts:

-   `dev:ssr` is an equivalent of the `ng serve` command. You should use it for development purposes. The difference between `npm run dev:ssr` and `ng serve` is that the former will compile both server-side and browser-side code for you. This enables you to check how your application behaves in the server environment. Both solutions are watching your project for changes, so whenever you apply changes in code, they will automatically trigger the compilation process.
-   `build:ssr` is an equivalent of `ng build --prod`. This command should be used to compile the production-ready application. Once it is applied, you will see compilation output inside the _dist/[projectName]/browser_ and _dist/[projectName]/server_ folders in your project.
-   `serve:ssr` is used to serve the application in production mode. This script runs the compiled server source code, which resides in the _dist/[projectName]/server_ folder.
-   `prerender` is a script that you can use to generate HTML and JavaScript for static hosting - we will cover this topic later in the course.

### Builders

Under the hood, the scripts described above use a set of builders added to your project. You can find them in the _angular.json_ file:

```json { actualFilename=./public/src/angular.json endLine=171 startLine=125 statedFilename=angular.json url=https&#x3A;//gitlab.com/fullstackio/books/guide-to-angular-universal/module_03/lesson_03.02/public/src/angular.json#L125 }
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/my-universal-app/server",
            "main": "server.ts",
            "tsConfig": "tsconfig.server.json"
          },
          "configurations": {
            "production": {
              "outputHashing": "media",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "sourceMap": false,
              "optimization": true
            }
          }
        },
        "serve-ssr": {
          "builder": "@nguniversal/builders:ssr-dev-server",
          "options": {
            "browserTarget": "my-universal-app:build",
            "serverTarget": "my-universal-app:server"
          },
          "configurations": {
            "production": {
              "browserTarget": "my-universal-app:build:production",
              "serverTarget": "my-universal-app:server:production"
            }
          }
        },
        "prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "browserTarget": "my-universal-app:build:production",
            "serverTarget": "my-universal-app:server:production",
            "routes": [
              "/"
            ]
          },
          "configurations": {
            "production": {}
          }
        }
```

As you can see, the server-side rendering build will use a new entry point to your application, _server.ts_.

### Node.js application

The _server.ts_ file is where the Node.js application resides.

```typescript { actualFilename=./public/src/server.ts endChar=2019 endLine=61 startChar=0 startLine=1 statedFilename=server.ts url=https&#x3A;//gitlab.com/fullstackio/books/guide-to-angular-universal/module_03/lesson_03.02/public/src/server.ts }
import 'zone.js/dist/zone-node';

import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';

import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';

// The Express app is exported so that it can be used by serverless Functions.
export function app() {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/my-universal-app/browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
  }));