The newline Guide to Angular Universal

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.

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.

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.

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.

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

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.

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

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.

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.

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.

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.

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.

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.

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

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.

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

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

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

Testing an Angular Universal application can be tricky. In this module, you will learn how to create tests that are specific to Angular Universal applications.

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.

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.

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.

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

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.

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.

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.

After finishing this module, you will know how prerendering works, how to prepare backend for prerendered Angular application and how to utilize MongoDB connection during prerendering process.

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.