No Service worker files ngsw.json / ngsw-worker.json generated when running build --prod. Angular 5

Question

Using angular 5.1.2 Angular-cli 1.6.3

all files are pretty vanilla. dist folder is created

My ngsw-config.json

{
"index": "/index.html",
"assetGroups": [
    {
        "name": "app",
        "installMode": "prefetch",
        "resources": {
            "files": [
                "/favicon.ico",
                "/index.html"
            ],
            "versionedFiles": [
                "/*.bundle.css",
                "/*.bundle.js",
                "/*.chunk.js"
            ]
        }
    },
    {
        "name": "assets",
        "installMode": "lazy",
        "updateMode": "prefetch",
        "resources": {
            "files": [
                "/assets/**"
            ]
        }
    }]

}

my app.module.ts uses

  ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })

am using vanilla environment.ts and environment.prod.ts

main.ts

import './polyfills.ts';
import {enableProdMode} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

import {AppModule} from './app/app.module';
import {environment} from './environments/environment';

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
.then(() => {
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('ngsw-worker.js');
}

})
.catch(err => console.log(err));

Not sure what else to check

Same for me. I don't have these files in any build output and thus get "NotFound" from http-server when trying to retrieve them. But the strange thing is that the hosted application on Azure has the service-worker and registers it as expected. Is it maybe a known Angular-Cli problem of any version? Or did I forget to set any flag on the build scripts? I also have the ServiceWorkerModule.register call and the serviceWorker=true flag set. — seawave_23, May 17 '18 at 14:41

score 23 · Answer 1 · edited Nov 21 '18 at 20:02

23

Do you add serviceWorker property to apps first entry in .angular-cli.json? If not, angular-cli not built it.

"apps": [
  {
    ...
    "serviceWorker": true
  }
}

EDIT As of December 2018, .angular-cli.json is now angular.json, and the format for the serviceWorker is now:

{
    ...
    "projects": {
         "my-project-name": {
             "architect": {
                 "build": {
                     "configurations": {
                        "production": {
                           "serviceWorker": true
                        }
                     }
                 }
             }
         }
    }

You'll need to specify serviceWorker: true for every configuration where you want the service worker.

edited Nov 21 '18 at 20:02

Judah Gabriel Himango

58,906
38
158
212

answered Jan 06 '18 at 14:12

kklimczak

623
4
10

I have tried the above but it has not helped.., see angular-cli below: { "project": { "name": "ThatApp" }, "apps": [ { "serviceWorker": true, "root": "src", ...... "component": { "spec": true, "inlineStyle": false, "inlineTemplate": false } } } – user2182570 Jan 08 '18 at 17:53
1

I've updated your answer for the newest Angular (v7 at the time of this writing). – Judah Gabriel Himango Nov 21 '18 at 20:02
Thanks, this is the problem i was facing because i have different configuration for different environment, it is only configured for Production and i need to set it manually to my other configurations ``` "serviceWorker": true, "ngswConfigPath": "ngsw-config.json" ``` – Ron Michael Aug 08 '22 at 03:52

score 11 · Answer 2 · answered Oct 22 '18 at 22:34

I had the same problem. It turns out I was using a old package

"@angular-devkit/build-angular": "~0.6.6"

This should be

"@angular-devkit/build-angular": "~0.10.0",

after this, the service worker is copied

Also make sure to be using latest Angular 7 and lateset Angular CLI

score 5 · Answer 3 · answered May 18 '18 at 08:33

After a long search, we found out that the missing --prod flag in our build makes the problem. Exactly this one produces the service-worker files and no additional build flag is able to do it (same with uglifying and the uglifyer was the reason why we had exchanged the --build flag against --env=build earlier). More information about what happens on the --build flag to be found here: Angular 2 with CLI - build for production.

score -3 · Answer 4 · answered Jan 09 '18 at 16:16

-3

It appears my app.module.ts was missing a space

I had: environment.production ? ServiceWorkerModule.register('/ngsw-worker.js') :[]

changed to: environment.production ? ServiceWorkerModule.register('/ngsw-worker.js') : []

answered Jan 09 '18 at 16:16

user2182570

403
3
6
12

6

Extra whitespace doesn't matter in JavaScript. – Judah Gabriel Himango Nov 21 '18 at 16:39

No Service worker files ngsw.json / ngsw-worker.json generated when running build --prod. Angular 5

4 Answers4