Service worker registration failed with: TypeError: Failed to register a ServiceWorker for scope

Question

I am having a problem with registering service worker in my angular app. Everything was working fine, before I switched from standard npm run start script:

"start": "ng serve --aot --port 4200"

to script using specific configuration, where I just replace my assets, styles and scripts and environment files.

"start": ng serve --aot --configuration=development --port 4200

My question is, what is the standard configuration for ng serve, so I could configure my configuration in a similar way? Or if the problem lies somewhere else, what could I do to fix it? How can I disable service worker on a development environment? serviceWorker: false in angular json does not work. (I am still getting errors)

Solution 1

Setting the production to false, from environment.ts should do the trick.

Solution 2

Looks like I found a way to fix this problem. The issue was in my app.module.

Instead of writing:

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

I had to use the following:

imports: [
  ServiceWorkerModule.register('ngsw-worker.js'),
],
providers: [
  {
    provide: SwRegistrationOptions,
    useFactory: () => ({ enabled: environment.production }),
  },
]

I think that this issue was related with dynamically changing the environment files during serve/build. Could someone explain in more details why this was a problem?