安装@angular/pwa失败：路径/src/@app/app.module.ts不存在的解决方法

1. 确认模块文件的真实路径 #

先检查项目里app.module.ts的实际位置：

• 常规Angular项目的路径是src/app/app.module.ts
• 如果你的项目自定义了目录结构，比如把app目录命名为@app，那路径应该是src/@app/app.module.ts

2. 手动指定模块路径执行安装命令 #

使用--module参数明确指定模块文件路径，重新执行PWA安装：
如果模块在常规路径：

ng add @angular/pwa --module=src/app/app.module.ts

如果模块在src/@app/app.module.ts：

ng add @angular/pwa --module=src/@app/app.module.ts

3. 检查项目配置文件 #

打开angular.json，找到对应项目的build配置，确认tsConfig指向的配置文件中，路径别名（如果有@app）是否正确：
比如在tsconfig.json的compilerOptions.paths里：

"paths": {
  "@app/*": ["src/app/*"]
}

确保别名对应的目录真实存在，避免schematic解析路径时出错。

4. 手动完成PWA配置（自动安装失效时） #

如果上述方法都不行，可以手动配置PWA：

1. 安装依赖：

npm install @angular/pwa @angular/service-worker

2. 在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,
      registrationStrategy: 'registerWhenStable:30000'
    })
  ]
})
export class AppModule { }

3. 在index.html的<head>中添加manifest相关标签：

<link rel="manifest" href="manifest.webmanifest">
<meta name="theme-color" content="#1976d2">

4. 修改angular.json的build配置，启用serviceWorker：

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

5. 生成PWA配置文件：

ng generate service-worker

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