Angular 7 无法注册 ServiceWorker : A bad HTTP response code (404) was received when fetching the script

Question

我收到以下错误

ERROR Error: Uncaught (in promise): TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.
TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.

我使用提示“ng add @angular/pwa”来添加我的 ngsw-config.json 和 list 文件。此提示还添加了我的 "serviceWorker": true 语句和我的环境注册到我的 app.module.ts

在验证所有内容都已正确添加后，我运行了成功构建的命令“ng build --prod”，并生成了显示的 dist dist folder

然后我运行“ng serve --prod”，我收到了图片中显示的错误 errors

在 app.module.ts 中使用的行

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

ngsw 配置:

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

angular.json 中 serviceWorker true 的放置:

"configurations": {
            "production": {
              "serviceWorker": true,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],

Answer 1

由于您提到根目录是 dist 文件夹，因此在运行 ng build 脚本后，您的 service-worker.js 文件必须位于 dist 文件夹中。

将 "precache": "sw-precache --verbose --config=sw-precache-config.js" 添加到您的 package.json 脚本对象。

然后运行:ng build --prod --aot，然后是npm run precache。现在您的 service-worker.js 文件将出现在 dist 文件夹中。

由于 Angular 编译器已将您的应用程序代码编译为 js 文件并将其存储在 dist 文件夹中，现在您必须从 dist 文件夹提供您的应用程序。

但默认的 ng serve 不支持它。我建议你使用 http-server。 npm 安装 http-server -g。然后 http-server ./dist -o。这会在默认浏览器中打开您的应用。