Introduction to Angular Universal

In the last few years, Angular become one of the most famous front-end framework to develop single page application.

Most of the people think Angular only works on client-side but its partially true as there is one concept in Angular which explain some part of the application to be rendered at server side before downloading it into your browser. This concept is called Angular Universal. 

Let’s talk about it in detail and how to implement it in your application. Before moving to Angular Universal, let’s talk about how the Angular application behaves in briefly and why there is need of Angular Universal.

Generally, when we try to run the Angular application, the JavaScript is first downloaded into the browser which then rendered inside the browser and the webpage are displayed to the user. Generally due to high connectivity we generally don’t notice all these steps. But the problem arises when the connectivity is slow, it takes time to download the required JavaScript files and render them till these all complete, the user sees a blank page which can be frustrated for any user.

So, to solve this problem the concept of Angular Universal is introduced in the Angular.

Angular universal allows user to pre render some angular application on the server. It’s not like a server side JavaScript. Therefore, you won’t be able to write server side code within the angular application.

The initial request is pre rendered in the server and the subsequent js request will then load the whole angular application to browser to make it fast and more reactive. The first load is handled on the server that fixes the UI problem for the user if the connection is slow. So, user is able to see the first web page of application that can be authentication page or any other page even if the JavaScript is partially downloaded or rendered due to slow connectivity issue.

So, this is the basic idea behind the Angular Universal. Now, let’s see how to implement it. To make your application Angular Universal just run the following command in the terminal.

ng add @nguniversal/express-engine –clientProject projectname

Note: projectname can be found in the angular.json file under the project and then identificatier-name.

This will add the option to render the application on server and gets the pre rendering stuff.

Note: If you are using Angular 8 or below then following needs to be checked.

ModuleMapLoader should be imported in the app.server.module.ts under import section. If you are unable to find the app.server.module.ts file then run the following command.

npm install –save @nguniversal/module-map-ngfactory-loader

The above step need not be done for Angular 9 and above. The above module helps to enable lazy loading in the angular universal.

Now, your app is ready to pre render some of angular content on the server. The first page would be rendered on the server and only after the first page is rendered and returned to the user only then the whole application run in the browser as usual.

Now, this approach has one major implication. If your first request that now be rendered at server side contains some browser based methods that cannot be run into server like localStorage, your application will fail to build. To solve this problem we have two approaches. Either we replace it with some other methods if possible or we make sure such request is only dispatched when the platform is browser not the server. To check whether the platform is browser or server, angular provides a method named Platform Browser which can be imported from @angular/common.

Now, use the following command to build the application –

npm run build:ssr

Note: Since now your angular application is partially rendered on server side so, you need a node js server to run the application as the static host is not enough to run your application.

After making sure you installed the node js server or upload the application over the deployed server. Run the following command to run the application.

npm run serve:ssr

So, in this way now your angular application would take full advantage of the server and you can use it to pre render some content of the angular application.