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.
So, to solve this problem the concept of Angular Universal is introduced in the Angular.
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.