Angular v8 抛出错误，未检测到匹配的服务人员答案

【问题标题】：Angular v8 throw error no matching service worker detectedAngular v8 抛出错误，未检测到匹配的服务人员
【发布时间】：2020-06-04 13:12:30
【问题描述】：

在使用带有角度 v8 的服务工作者时，我总是收到如下错误，这在 v7 中没有发生

下面是我的配置

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"
        }
    ]
}

请帮我指出我错过了什么。

非常感谢。

【问题讨论】：

在index.html 中链接manifest.webmanifest，但在ngsw-config 中引用manifest.json。我不知道这是否有助于解决问题。我只是指出来。
抱歉，打错字了。我正在使用 json 文件
你解决过这个问题吗？我在 Angular 9.0.0 上遇到了完全相同的问题
@Kosso 遗憾的是仍然找不到解决方案:(
@TonyNgo 好的。自从我询问后，我发现我的网站上所需的时间间隔似乎会影响 Service Worker 的注册。所以要修复它，我需要将registrationStrategy 设置为registerImmediately，如下所示：ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production, registrationStrategy: 'registerImmediately' }) 默认情况下，Service Worker 将等到站点“稳定”。

标签： javascript angular service-worker progressive-web-apps angular8

【解决方案1】：

我发现了问题。网络可能不稳定，因此服务人员无法注册。所以要修复它，只需添加这个配置

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

【讨论】：

在 Angular 10 PWA 上遇到了类似的问题（在 Chrome 上看到）。这是我缺少的配置。谢谢！

【解决方案2】：

我想你可能错过了

"/index.html" “/assets/**”，或者您的资产可能位于单独的图像文件夹中（在我看到文件夹结构之前我无法确定） "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)" 在

    {
     "$schema": "./node_modules/@angular/service-worker/config/schema.json",
     "index": "/index.html",
    "assetGroups": [
     {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/assets/favicon.ico",
          "/index.html",
          "/manifest.json",
          "/*.css",
          "/*.js"
        ]
       }
     }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
           "/assets/**",
           "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
         ]
       }
      }
     ]
   }

除此之外似乎没有什么区别。虽然，我尝试了与您相同的配置，它工作正常。

【讨论】：

【解决方案3】：

你需要使用

"ngswConfigPath": "src/ngsw-config.json",

而不是

"ngswConfigPath": "ngsw-config.json",

【讨论】：

ngsw-config.json 与 angular.json 文件处于同一级别，所以"ngswConfigPath": "ngsw-config.json", 是正确的
你为什么把这个文件移动到 angular.json 的同级？创建 dist 文件夹后，您的 ngsw-config.json 是否在 dist 中？
我看不出有什么问题，但是您使用的是@angular/pwa 软件包版本^0.900.2 和Angular 版本8.2.14，您可以尝试从^0.900.2 升级到任何版本8 吗？我目前正在使用版本^0.801.0。也许从 8 到 9 发生了变化，这会产生您的问题。