Configure your angular application with Prerender or SSR and PWA

In the era of 2022, the web application has had to work faster with any kind of device, as now the user does not have any patience to wait to get into your application. There are several competitor sites that are there to serve our purpose by solving problems by one another. And the solution states correctly and presents the user with useful information quickly that the solution will be picked up. So, in the case of Time, Performance & solution all are equally important for any kind of application.  

In the case of the Angular application, there are many ways to improve the application performance, which I learned one by one by solving challenges. Earlier days, I created an angular application and the performance and SEO were not implemented correctly. It took a lot of time to understand the root cause and get fixed one by one. 

The following could be your case when you might find that your angular application still not holding good and you do need to improve the performance. Most of us like noob developers, trying very hard to get things being done properly. That will not happen in a day definitely as we are not aware of the features are being available to fit our application. Once we get more problems or challenges, we are trying to find the solutions, and believe me, the Web (internet) is one of the best mediums to get all particles and put those together and build proper stuff to serve the business. Eventually, we can modify one another whenever new updates or features are available.

I have improved angular application performance by opting for options one by one. I will have all list in another article but here I am mainly focusing on what features are available to improve Angular application performance. 

1. Create Angular Application with mostly used version.
2. Integrate Angular Universal framework.
   1. Dynamic web application - Server-Side Rendering (SSR)
   2. Static web application - Prerendering
3. Integrate PWA

Let's make our hands dirty...

Create an Angular application (v 11 / 12 / 13)

I believe you do have any of angular-CLI been installed on your device, and already created any angular application using ng new command. If not, then let's create one - 

Once the application is created, you can make some simple changes like 2 routes, 2 API calls, 1 details page. I already have one sample application and there I am going to make the changes. and let's configure Angular Universal on your application.

Let's see the Lighthouse report after implementing the router, API, and details page -

Configure Angular Universal for SSR & Prerender

I already have two long blogs for configuring Angular Universal and during the process if you are facing any challenges, how you can resolve those. You can check those as well. 

First tutorial - 

Second Tutorial - 

Codebase with only Angular Universal enabled application, you can find from here.

Let's see the Lighthow report with the Angular Universal application.

Configure PWA on Angular Universal App

A lot of benefits you can get using Angular universal, but still, I want to achieve some more features such as - 

To have all the above functionality, we need to configure angular PWA to our angular Universal app. First, install the following - 

This command will make all necessary changes to get PWA to be worked. 

• Adds the @angular/service-worker package to your project.
• Enables service workers to build support in the CLI.
• Imports and registers the service worker in the app module.
• Updates the index.html file:
• Includes a link to add the manifest.webmanifest file.
• Adds meta tags for theme-color.
• Installs icon files to support the installed Progressive Web App (PWA).
• Creates the service worker configuration file called ngsw-config.json, which specifies the caching behaviors and other settings.

After installation, and with prod build you can see under dist folder there is a ngsw.json file. Which will going to enable the PWA configuration and register service worker for your application.