Angular 6迁移后PWA无法添加，执行ng add @angular/PWA报错求助

我来帮你搞定这个迁移中的PWA问题，这个报错大概率和项目配置或者Angular CLI的使用方式有关，下面是几个经过验证的解决步骤：

1. 检查项目配置中的Targets #

Angular 6开始用angular.json替代了旧的.angular-cli.json，首先打开这个文件，确认你的项目下有完整的architect配置（包含build和serve targets）。正常的配置结构应该类似这样：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
          // 你的构建配置
        },
        "configurations": {
          "production": {
            // 生产环境配置
          }
        }
      },
      "serve": {
        "builder": "@angular-devkit/build-angular:dev-server",
        "options": {
          // 开发服务器配置
        }
      }
    }
  }
}

如果architect下的targets缺失或者损坏，你可以参考同版本的新项目配置来补充，或者备份好现有配置后执行ng update @angular/cli修复配置文件。

2. 明确指定项目名称执行命令 #

有时候CLI无法自动识别当前项目，这时候可以在命令里明确指定项目名称，确保名称和angular.json里projects下的项目名完全一致（注意大小写）：

ng add @angular/pwa --project your-project-name

3. 确保Angular CLI版本和项目兼容 #

Angular 6对应的CLI版本必须是6.x系列，版本不匹配也会导致各种奇怪的错误。先执行下面的命令查看当前版本：

ng --version

如果CLI版本不对，先全局和本地都安装对应版本的CLI：

npm install -g @angular/cli@6.x
npm install @angular/cli@6.x --save-dev

安装完成后重新尝试添加PWA命令。

4. 手动配置PWA（自动命令失效时的备选方案） #

如果上面的方法都不行，可以手动完成PWA的配置：

• 首先安装依赖：

  npm install @angular/service-worker@6.x --save
  

• 在app.module.ts中导入并注册ServiceWorker模块：

  import { ServiceWorkerModule } from '@angular/service-worker';
  import { environment } from '../environments/environment';
  
  @NgModule({
    imports: [
      // 其他已导入的模块
      ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
    ],
    // ...其他模块配置
  })
  export class AppModule { }
  

• 修改angular.json的build配置，开启serviceWorker并添加必要的资源：

  "build": {
    "options": {
      "serviceWorker": true,
      "assets": [
        "src/favicon.ico",
        "src/assets",
        "src/manifest.json",
        "src/ngsw-config.json"
      ]
    }
  }
  

• 创建src/manifest.json和src/ngsw-config.json文件，参考Angular 6的PWA规范编写配置（比如manifest里设置应用名称、图标、启动方式等，ngsw-config里配置缓存策略）。

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