Angular throw error no matching service worker detected

Question

I'm always get the error like below when using service worker with angular v8 which did not happend in v7

Below is my config

package.json

    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/pwa": "^0.900.2",
    "@angular/router": "~8.2.14",
    "@angular/service-worker": "~8.2.14",

angular.json

"assets": [
    "src/assets/favicon.ico",
    "src/assets",
    "src/manifest.json"
],
"configurations": {
    "production": {
        // other is ommitted
        "serviceWorker": true,
        "ngswConfigPath": "ngsw-config.json"
    }
}

ngsw-config.json

{
    "$schema": "./node_modules/@angular/service-worker/config/schema.json",
    "index": "/index.html",
    "assetGroups": [
      {
        "name": "app",
        "installMode": "prefetch",
        "resources": {
          "files": [
            "/assets/favicon.ico",
            "/manifest.json",
            "/*.css",
            "/*.js"
          ]
        }
      }, {
        "name": "assets",
        "installMode": "lazy",
        "updateMode": "prefetch",
        "resources": {
          "files": [
            "/images/**"
          ]
        }
      }
    ]
  }

app.module.ts

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

index.html

<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#1976d2">

manifest.json

{
    "name": "project",
    "short_name": "project",
    "theme_color": "#1976d2",
    "background_color": "#fafafa",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "icons": [
        {
            "src": "assets/favicon.ico",
            "sizes": "72x72",
            "type": "image/ico"
        },
        {
            "src": "assets/favicon.ico",
            "sizes": "96x96",
            "type": "image/ico"
        },
        {
            "src": "assets/favicon.ico",
            "sizes": "128x128",
            "type": "image/ico"
        },
        {
            "src": "assets/favicon.ico",
            "sizes": "144x144",
            "type": "image/ico"
        },
        {
            "src": "assets/favicon.ico",
            "sizes": "152x152",
            "type": "image/ico"
        },
        {
            "src": "assets/favicon.ico",
            "sizes": "192x192",
            "type": "image/ico"
        },
        {
            "src": "assets/favicon.ico",
            "sizes": "384x384",
            "type": "image/ico"
        },
        {
            "src": "assets/favicon.ico",
            "sizes": "512x512",
            "type": "image/ico"
        }
    ]
}

Please help me to point out what I have missed.

Much appriciated.

Answer 1

I found the issue. The network may not stable so service worker cant register. So to fix it simply add this config

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