Angular PWA pitfalls — how to address them with @ng-toolkit

Progressive Web Apps are here for more than a moment! An angular team has done a great job by giving to the developers an ability to extend their applications with PWA functionality by one command: ng add @angular/pwa!

But! There are some pitfalls. Today I am going to show you one of them, and how you can address it in a super-simple way.

The only thing which you need to accomplish this tutorial is Angular CLI installed on your machine. During writing this article, I am using version 6.0.8.

Set up the PWA

We will start by creating a new project and adding server-side rendering (read more about ng-toolkit/universal here) and PWA functionality to it:

ng new myPWA
cd myPWA
ng add @ng-toolkit/universal
ng add @angular/pwa

Now, we will build it and check out what we have:

npm run build:prod
npm run server

After navigating to http://localhost:8080 within your browser. You should see an Angular “welcome” app, with service-worker installed behind the scenes:

Angular Progressive Web App & Server Side Rendering