Service Workers and Angular CLI

person carlosrojasofolder_openUncategorizedaccess_time December 20, 2017
Service Workers and Angular CLI

Angular CLI is a great tool that makes it easy to create an application that works with Angular and best practices. Recently was released Angular CLI 1.6 have a bunch of good stuff but the cool thing for us is that we can activate easily NGSW.

NGSW is a JSON that allows us to configure our Service Worker easily. Personally, I think this is awesome.

Have a shiny PWA with Angular is easy using Angular CLI, All you have to do is.

1. Install Angular CLI

$npm install -g @angular/cli

2. Create a new App

$ng new pwaApp

$cd pwaApp/

3. Enable service worker build support in the CLI

$npm install @angular/service-worker

$ng set apps.0.serviceWorker=true

4. Import and register the service worker

import { ServiceWorkerModule } from '@angular/service-worker'
import { environment } from '../environments/environment';


  imports: [
     ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})
export class AppModule { }

5. Create the configuration file, ngsw-config.json

  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
      "versionedFiles": [
  }, {
    "name": "assets",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [

6. Build the project

$ng build --prod

That’s it.

Now you can have your progressive web app waiting for you in dist/ folder.

Optional: Testing your PWA

Install a HTTP Server

$npm install -g http-server

Run http-server

$cd dist/

$http-server -p 8080

Hoping this info can be handy. Until a new Post 🙂

Liked it? Take a second to support carlosrojaso on Patreon!