Angular英雄之旅第6节运行项目遇依赖冲突及执行错误求助

1. 修复依赖冲突问题 #

你遇到的peer依赖冲突是因为angular-in-memory-web-api@0.16.0仅支持Angular 16及以下版本，而你的项目用的是Angular 17。不要用--force或--legacy-peer-deps强制安装，这可能导致后续运行时出现未知bug。

• 正确做法是安装适配Angular 17的版本：

  npm install angular-in-memory-web-api@0.17.0 --save
  

  这个版本专门适配Angular 17的peer依赖要求，能彻底解决版本不兼容问题。

2. 解决browserTarget缺失错误 #

这个错误源于angular.json中的配置异常，常见原因和修复方式：

• 原因1：示例项目与本地CLI版本不兼容
  你下载的toh-pt6示例可能基于旧版Angular（比如Angular 16及以下），而本地安装的是Angular 17 CLI，两者的angular.json结构存在差异。
  修复步骤：
  1. 打开项目根目录的angular.json，定位到projects -> [你的项目名] -> architect -> serve节点。
  2. 检查是否存在browserTarget字段，若缺失则添加如下配置（替换[你的项目名]为实际项目名称）：

     "serve": {
       "builder": "@angular-devkit/build-angular:dev-server",
       "options": {
         "browserTarget": "[你的项目名]:build"
       },
       "configurations": {
         "production": {
           "browserTarget": "[你的项目名]:build:production"
         }
       }
     }
     

• 原因2：自定义项目配置被误修改
  如果是你自己的项目出现该错误，检查是否在调整angular.json时不小心删除了browserTarget配置，按照上述结构补全即可。

3. 重新初始化依赖并启动项目 #

完成上述修复后，执行以下步骤确保环境正常：

1. 删除旧依赖缓存文件：

   rm -rf node_modules package-lock.json
   

2. 重新安装依赖：

   npm install
   

3. 启动项目：

   ng serve
   

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