"For every 100 ms of improvement, they grew incremental revenue by up to 1%"Because of this aspect, it is extremely important to implement very fast page load speeds. There are a few techniques that all have different benefits. For example, when websites are created as progressive web applications, they introduce caches that reuse data and patch incoming data in the background. This results in a large increase in load times except for the first page load. Other approaches, e.g. prevent the loading of images outside the screen. The use of all techniques in combination gives a good result. Therefore, we should not miss the server-side rendering.
To implement server-side rendering, you must have access to a Nodejs-enabled Web server. For example, I like to use Heroku because of its simplicity. In addition, you must have an existing Angular application for it to be rendered server-side. This article recommends Angular 6 projects and I do not think this works the same way with earlier versions.
Assuming you have got an existing Angular project with a similar folder structure as above, this article describes how to make it server-side rendering capable.
At first install required dependencies @nguniversal/express-engine and @nguniversal/module-map-ngfactory-loader using the following command.In addition I will use express as NodeJS webserver. So also do npm i express.
Create the server
Let us first create the api function in the api.ts file, which requires the distPath, the Angular build path, and the Angular Universial options. This file contains the very basic and minimal function and does for example not include SSL enforcement and compression.The next thing to do is the server implementation in the main.server.ts file.Ouch. Lets destruct it step by step. At first we are importing all required plugins. Afterwards we define the port and the distribution path of the Angular project mentioned earlier in the api creating function followed by enabling production mode, which disables unidirectional dataflow in the Angular application, read more.
In the next step we are implementing a function which returns an data object looking similar to the NgModule decorator input. There is the bootstrap and the providers attribute. So we are bootstrapping an ApplicationModuleNgFactory. Digging deeper there is the compiled main.js output withWe're telling the server to use Angular-Universal generated module maps instead of lazy-loading routes. The next steps are pretty simple. Exporting the AppServerModule, create a requestListener with the distribution path and the rendering options as parameters, set up an http server with the requestListener listening for incoming requests and make the server listen to request on PORT.
Set up Angular CLI
Make sure to add the Universal dev kit to the developer dependenciesAfterwards go to your angular.json file and add the following parts to the architects section (the section where the build and serve sections are located).andDon't forget to change blog to your applications ID (the direct child of projects section).
Add a build script
Add the following script to your package.json file and don't forget to replace blog with your application ID again.
Build and run