Using Secrets with 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.

Browser Versus Server#

The code of the application built in the previous module is available for download here. Once you download it, remember to install the project using the npm install command inside the project directory.

Where you are#

In the previous module, you've applied Angular Universal schematics to a production-ready application. You've also learned how to significantly improve Time To First Byte in production environment. Here's how your application works right now:

On the one hand, your solution is fully functional. Thanks to Angular Universal, you share the code base between your server-side and browser-side bundles. On the other hand, there is still plenty of room for improvement. Let's take a look at the detailed server-side flow of the application (purple arrows shows HTTP communication; green arrows shows in-app communication):

  1. The user navigates to the application's root path (/).

  2. server.ts recognizes that an Angular route has been invoked, so it bootstraps the rendering process.

  3. ProductListComponent retrieves a list of products using ProductsService.

  4. ProductsService sends an HTTP request to retrieve the list of products from the /api/products endpoint.

  5. server.ts recognizes the API request and passes it to api.ts.

  6. api.ts queries MongoDB to retrieve the requested data.

  7. The list of products is sent back to ProductsService as an HTTP response.

  8. The rendered HTML is sent back to the user.

You can observe this behavior by running the application in development mode:

 

This page is a preview of The newline Guide to Angular Universal

Start a new discussion. All notification go to the author.