覆盖@angular/pwa ngsw-worker.js答案

【问题标题】：Overriding the @angular/pwa ngsw-worker.js覆盖@angular/pwa ngsw-worker.js
【发布时间】：2019-09-26 21:41:39
【问题描述】：

我正在处理an app，我想与 Firebase 消息传递集成。为此，我需要在构建时将一些代码附加到由@angular/pwa 生成的ngsw-worker.js。

我尝试在src/ 中创建ngsw-worker.js，但是在运行rm -rf dist/ && ng build --prod 之后，dist/ 中的版本没有我的更改。

【问题讨论】：

【解决方案1】：

你可以这样做

首先你需要运行

ng build --prod

因此，您可以从项目根目录下的 dist 文件夹中复制文件 ngsw-worker.js（与 package.json 处于同一级别），然后您可以使用所需内容修改该文件。

接下来创建一个文件名 replace-sw.sh 并将此内容粘贴到该文件中

#!/bin/bash
cp ./ngsw-worker.js ./dist/

最后更新你的 package.json

"build": "ng build --prod && replace-sw.sh"

然后你可以简单地运行npm run build

【讨论】：

【解决方案2】：

service worker模块导入app.module.ts时，包含worker的路径。

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

将该路径更改为其他内容，然后在该文件importScripts('/ngsw-worker.js) 中。还将它包含在angular.json 的assets 部分中，以便将其复制到生产环境中。

【讨论】：