Angular7 无法注册 ServiceWorker：获取脚本时收到错误的 HTTP 响应代码 (404)

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 和清单文件。此提示还添加了我的 "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/**"
        ]
      }
    }
  ]
}

serviceWorker 在 angular.json 中的位置为真：

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

Answer 1

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

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

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

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

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

Answer 2

使用 Angular 10，解决方案只是 运行 http-server 而不是 ng-serve，遗憾的是后者不支持服务工作者。

1。使用 NPM 安装 http-server:

npm install http-server --save-dev

2。使用 http-server

服务您的项目

然后（假设你的项目叫我的项目），运行:

# cd into the root folder for your angular project
http-server -p 8080 -c-1 dist/myproject

即这假定您的项目的导出位于文件夹 dist/myproject/ 中（如果没有则更改）。

注意： -c-1 指令告诉 HTTPServer 关闭缓存 - see docs for details.

Answer 3

在您的 environment.ts 文件中将 production 设置为 false，例如

export const environment = {
  production: false,
}