Angular14中修改ngsw-worker.js及重命名的可行性与方法咨询

一、直接修改 node_modules 里的 ngsw-worker.js 可行吗？ #

技术上能改，但非常不推荐，原因如下：

• 每次执行npm install或yarn install，修改的内容都会被覆盖——node_modules是依赖的安装目录，重新拉取包时会还原成原始文件。
• 团队协作时没法同步你的修改，其他成员装完依赖还是拿到原始版本。
• 违反Angular最佳实践，后续升级Angular版本时，很容易出现兼容性问题，排查起来麻烦。

如果确实需要定制Service Worker的逻辑，建议复制原始文件到项目目录做修改，再通过配置指定使用自定义文件，而非直接改依赖包内的文件。

二、怎么把 ngsw-worker.js 重命名为 ngsw.js？ #

按以下步骤操作即可：

1. 复制并重命名文件
   从node_modules/@angular/service-worker/ngsw-worker.js复制一份到项目的src目录，改名为ngsw.js。
2. 修改 angular.json 配置
   打开项目根目录的angular.json，找到对应项目的build配置，在options里添加workerFile字段，指定自定义的文件名：

   "architect": {
     "build": {
       "options": {
         "serviceWorker": true,
         "ngswConfigPath": "src/ngsw-config.json",
         "workerFile": "src/ngsw.js"
       }
     }
   }
   

3. 更新Service Worker注册代码
   打开src/app/app.module.ts（或者你用来注册Service Worker的文件），把注册路径从ngsw-worker.js改成ngsw.js：

   import { ServiceWorkerModule } from '@angular/service-worker';
   import { environment } from '../environments/environment';
   
   @NgModule({
     imports: [
       ServiceWorkerModule.register('ngsw.js', {
         enabled: environment.production
         // 保留其他原有配置
       })
     ]
   })
   export class AppModule { }
   

4. 重新构建项目
   执行ng build --prod（或你常用的生产构建命令），构建完成后，dist目录里生成的就是ngsw.js了。

内容的提问来源于stack exchange，提问作者Hesam Akbari