Angular Universal and the Era of Single-Page Applications

Course prerequisites

Introduction

How Does Angular Work with Heroku and MongoDB?

How to Install Angular From the CLI and Add Bootstrap CSS

How to Build and Run an Angular Backend to Test Locally

How to Install MongoDB Locally and Import JSON Data

How to Build a MongoDB REST API to Fetch Data

Build MongoDB API With Encryption for PII Data and Auth

How to Add User Authentication to Angular With MongoDB API

How to Fetch Data From MongoDB and Display it in Angular

How to Deploy an Angular App and Watch Performance

Building the app

Angular Universal

Server-Side Rendering With Angular Universal Schematics

How to Measure Performance - Angular vs Angular Universal

How to Add Internationalization to Angular With i18n

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

How to Optimize Angular SEO With Title and Meta Tags

Noscript

Applying Angular Universal

Retrieve MongoDB Data in Angular Universal With Secrets

How to Query MongoDB from Angular Universal

How to Build Server-Specific Services in Angular Universal

How to Read HTTP Requests With Cookies in Angular

How to Make Angular Functional With JavaScript Disabled

Browser vs. Server

Send Server Data to Client With Angular TransferState

Perform Angular HTTP Calls With TransferHttpCacheModule

How to Handle Slow API Calls in Angular

Transfering data between server and browser

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

How to Cache Angular With Redis Node.js Middleware

5 Angular Performance Optimization Tips

Caching with Redis

Module Overview

How to Mock PLATFORM_ID Value for Angular Unit Testing

How to Unit Test Slow API Calls in Angular

How to Unit Test Server-Side Services in Angular Karma

Build Angular End-to-End Unit Tests With TransferState

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

Testing

Prerendering in Angular

How to Resolve Angular Prerendering Issues

Summary

Prerendering

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

Single-page applications (SPA) have quickly become a web standard. Almost every website is SPA these days. They give users a native-like app experience with smooth transitions, you don't need to bother with preparing your application for different browsers (frameworks take care of that), and much more. However, they have at least one big pitfall: they are rendered in the browser rather than on the server. To understand the problem, consider the browser's simplified workflow. The browser:

As you can see, the moment when your Angular application is bootstrapped is at the very end of the workflow. That's why it takes so long to render the first contentful paint.

SPAs have one more pitfall. Because content is rendered in the browser, the 

 file shipped to the end user has no content. What if your end user is a web crawler?

In this course, you will learn how to address these pitfalls by bootstrapping your Angular application in Node.js and serving the end user's browser with fully rendered HTML views. You will learn how to improve your overall application performance and boost its Google 

In the first course module you will build a regular Angular application served from the Heroku. Such application scores around 60-70 points in the PageSpeed Insights audit:

Moreover, it takes a little bit to ship the first byte (about 70ms):

At the very end of this course, your application will score over 90 points:

In addition to learning to apply Angular Universal in existing applications, you will learn best practices and techniques such as:

During this course you will build an Angular application that:

---
title: Angular Universal and the Era of Single-Page Applications
description: Introduction to Guide to Angular Universal
role: "INTRODUCTION"
isPublicLesson: true
---

# The Era of Single-Page Applications

Single-page applications (SPA) have quickly become a web standard. Almost every website is SPA these days. They give users a native-like app experience with smooth transitions, you don't need to bother with preparing your application for different browsers (frameworks take care of that), and much more. However, they have at least one big pitfall: they are rendered in the browser rather than on the server. To understand the problem, consider the browser's simplified workflow. The browser:

-   Establishes a connection with the server (queries DNS, sets up an SSL connection, etc.) and requests data.
-   Retrieves the data.
-   Renders HTML.
-   Applies CSS.
-   Bootstraps JavaScript.

As you can see, the moment when your Angular application is bootstrapped is at the very end of the workflow. That's why it takes so long to render the first contentful paint.

SPAs have one more pitfall. Because content is rendered in the browser, the `index.html` file shipped to the end user has no content. What if your end user is a web crawler?

## Guide to Angular Universal

In this course, you will learn how to address these pitfalls by bootstrapping your Angular application in Node.js and serving the end user's browser with fully rendered HTML views. You will learn how to improve your overall application performance and boost its Google [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights) score from 66 to 95 points!.

In the first course module you will build a regular Angular application served from the Heroku. Such application scores around 60-70 points in the PageSpeed Insights audit:

![](https://d2uusema5elisf.cloudfront.net/courses/newline-guide-to-angular-universal/module_01/lesson_01.01/public/assets/pagespeed_before.jpg)

Moreover, it takes a little bit to ship the first byte (about 70ms):

![](https://d2uusema5elisf.cloudfront.net/courses/newline-guide-to-angular-universal/module_01/lesson_01.01/public/assets/ttfb_before.jpg)

At the very end of this course, your application will score over 90 points:

![](https://d2uusema5elisf.cloudfront.net/courses/newline-guide-to-angular-universal/module_01/lesson_01.01/public/assets/pagespeed.jpg)

And TTFB will be decreased to 38ms:

![](https://d2uusema5elisf.cloudfront.net/courses/newline-guide-to-angular-universal/module_01/lesson_01.01/public/assets/ttfb.jpg)

In addition to learning to apply Angular Universal in existing applications, you will learn best practices and techniques such as:

-   Preparing separate logic paths in your application for browser and server runtimes.
-   Preparing server-specific Angular services.
-   Working with HTTP requests in Angular.
-   Transferring data between the server and the browser along with the application bundle.
-   Abandoning long-running API calls that affect server-side rendering performance.
-   Using Redis to cache rendered views on the server.
-   Testing server-side code.
-   Pre-rendering Angular applications to publish them using static hosting.

During this course you will build an Angular application that:

-   Responds to each HTTP request with fully rendered HTML.
-   Retrieves content from MongoDB.
-   Uses the `TransferState` registry to embed data retrieved during rendering into the application bundle and send it to the browser.
-   Contains routes that are only available to authenticated users.
-   Is fully functional also for users with disabled JavaScript.
-   Uses Redis to cache rendered views and ship them to the end user even faster.

You will learn how to:

-   Apply best performance tuning practices such as image lazy loading, deferring CSS, and using new image file formats: WebP and AVIF.
-   Enable gzip compression that improves your application's performance.
-   Use a CDN with your application and enable HTTP2 to ship your content even faster.


Introduction to Guide to Angular Universal

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

The newline Guide to Angular Universal

Module 1: Introduction

Introduction:

Start Here

Introduction:

Angular Universal and the Era of Single-Page Applications

Introduction:

Course prerequisites

Module 2: Building the app

Lesson 1:

How Does Angular Work with Heroku and MongoDB?

Lesson 2:

How to Install Angular From the CLI and Add Bootstrap CSS

Lesson 3:

How to Build and Run an Angular Backend to Test Locally

Lesson 4:

How to Install MongoDB Locally and Import JSON Data

Lesson 5:

How to Build a MongoDB REST API to Fetch Data

Lesson 6:

Build MongoDB API With Encryption for PII Data and Auth

Lesson 7:

How to Add User Authentication to Angular With MongoDB API

Lesson 8:

How to Fetch Data From MongoDB and Display it in Angular

Lesson 9:

How to Deploy an Angular App and Watch Performance

Module 3: Applying Angular Universal

Lesson 1:

Angular Universal

Lesson 2:

Server-Side Rendering With Angular Universal Schematics

Lesson 3:

How to Measure Performance - Angular vs Angular Universal

Lesson 4:

How to Add Internationalization to Angular With i18n

Lesson 5:

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

Lesson 6:

How to Optimize Angular SEO With Title and Meta Tags

Lesson 7:

Noscript

Module 4: Browser vs. Server

Lesson 1:

Retrieve MongoDB Data in Angular Universal With Secrets

Lesson 2:

How to Query MongoDB from Angular Universal

Lesson 3:

How to Build Server-Specific Services in Angular Universal

Lesson 4:

How to Read HTTP Requests With Cookies in Angular

Lesson 5:

How to Make Angular Functional With JavaScript Disabled

Module 5: Transfering data between server and browser

Lesson 1:

Send Server Data to Client With Angular TransferState

Lesson 2:

Perform Angular HTTP Calls With TransferHttpCacheModule

Lesson 3:

How to Handle Slow API Calls in Angular

Module 6: Caching with Redis

Lesson 1:

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

Lesson 2:

How to Cache Angular With Redis Node.js Middleware

Lesson 3:

5 Angular Performance Optimization Tips

Module 7: Testing

Lesson 1:

Module Overview

Lesson 2:

How to Mock PLATFORM_ID Value for Angular Unit Testing

Lesson 3:

How to Unit Test Slow API Calls in Angular