Angular 15依赖安装报错：找不到webpack-dev-server及CLI版本不匹配

问题描述 #

使用yarn安装Angular 15项目依赖时，出现报错：

could not find a copy of webpack-dev-server to link in c:path\node_module

此前项目可正常安装构建，其他Angular项目也未显式配置该依赖。手动安装webpack-dev-server、webpack-dev-middleware、webpack-hot-middleware后，又出现CLI版本不匹配导致无法构建的问题。项目package.json配置如下：

{
  "name": "@website",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint",
    "lint:staged": "lint-staged",
    "lint:styles": "./node_modules/.bin/stylelint src/**/*.scss --fix",
    "e2e": "ng e2e",
    "cypress:open": "cypress open",
    "cypress:run": "cypress run",
    "cypress:component": "cypress open --component",
    "format": "yarn prettier --write .",
    "prepare": "cd ../.. && husky install src/website-remote-iam/.husky"
  },
  "lint-staged": {
    "*.{js, ts}": [
      "eslint --quiet --fix"
    ],
    "*.{json, md, html, js, ts}": [
      "prettier --write"
    ],
    "*.scss": [
      "stylelint src/**/*.scss"
    ]
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "15.0.2",
    "@angular/common": "15.0.2",
    "@angular/compiler": "15.0.2",
    "@angular/core": "15.0.2",
    "@angular/forms": "15.0.2",
    "@angular/platform-browser": "15.0.2",
    "@angular/platform-browser-dynamic": "15.0.2",
    "@angular/router": "15.0.2",
    "@ngxs/store": "3.7.6",
    "rxjs": "7.6.0",
    "tslib": "2.4.1",
    "zone.js": "0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "15.0.2",
    "@angular-eslint/builder": "15.1.0",
    "@angular-eslint/eslint-plugin": "15.1.0",
    "@angular-eslint/eslint-plugin-template": "15.1.0",
    "@angular-eslint/schematics": "15.1.0",
    "@angular-eslint/template-parser": "15.1.0",
    "@angular/cli": "15.0.2",
    "@angular/compiler-cli": "15.0.2",
    "@cypress/schematic": "2.4.0",
    "@types/jasmine": "4.3.1",
    "@types/node": "18.11.5",
    "@typescript-eslint/eslint-plugin": "5.45.1",
    "@typescript-eslint/parser": "5.45.1",
    "cypress": "11.2.0",
    "eslint": "8.18.0",
    "eslint-config-prettier": "8.5.0",
    "eslint-plugin-cypress": "^2.12.1",
    "eslint-plugin-prettier": "4.2.1",
    "husky": "8.0.2",
    "jasmine-core": "4.5.0",
    "karma": "6.4.0",
    "karma-chrome-launcher": "3.1.0",
    "karma-coverage": "2.2.0",
    "karma-jasmine": "5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "lint-staged": "13.0.3",
    "ngx-build-plus": "15.0.0",
    "prettier": "2.8.0",
    "prettier-eslint": "15.0.1",
    "pretty-quick": "3.1.3",
    "serverless-localstack": "1.0.0",
    "stylelint": "14.15.0",
    "stylelint-config-prettier-scss": "0.0.1",
    "stylelint-config-standard-scss": "6.1.0",
    "typescript": "4.8.4"
  }
}

webpack-dev-server 作用解析 #

• webpack-dev-server是webpack官方开发服务器，提供热重载、本地开发服务能力。Angular CLI执行ng serve时，底层依赖它启动本地服务器，监听文件变化并自动刷新页面。
• 正常情况下Angular 15无需显式安装，因为@angular-devkit/build-angular（15.0.2版本）会将其作为内部依赖引入，无需开发者手动配置。

报错原因分析 #

1. 依赖缓存或安装异常：yarn/npm本地缓存损坏，导致@angular-devkit/build-angular的子依赖（含webpack-dev-server）未正确安装或链接。
2. ngx-build-plus 干扰：项目使用的ngx-build-plus（15.0.0）会扩展Angular构建流程，可能修改webpack依赖解析逻辑，导致找不到内部的webpack-dev-server。
3. 版本冲突：手动安装的webpack相关依赖版本与Angular CLI依赖的版本不匹配，引发后续CLI版本错误。

解决方案 #

步骤1：清理依赖缓存与残留文件 #

• 删除本地node_modules文件夹：

  rm -rf node_modules  # Linux/macOS
  # 或Windows命令
  rd /s /q node_modules
  

• 删除yarn.lock文件：

  rm yarn.lock
  

• 清理yarn缓存：

  yarn cache clean
  

步骤2：重新安装依赖 #

执行标准安装命令，让Angular CLI自动管理内部依赖：

yarn install

步骤3：处理ngx-build-plus潜在问题 #

若重新安装后仍报错，检查ngx-build-plus：

• 确认版本与Angular版本匹配，可尝试重新安装：

  yarn remove ngx-build-plus
  yarn add --dev ngx-build-plus@15.0.0
  

• 若不需要构建扩展功能，直接移除ngx-build-plus，恢复Angular默认构建流程。

步骤4：修复CLI版本不匹配问题 #

若手动安装webpack依赖导致版本冲突：

• 卸载手动安装的webpack相关包：

  yarn remove webpack-dev-server webpack-dev-middleware webpack-hot-middleware
  

• 确保全局Angular CLI版本与项目本地版本一致：

  # 查看本地版本
  ng version
  # 卸载全局CLI
  npm uninstall -g @angular/cli
  # 安装匹配版本
  npm install -g @angular/cli@15.0.2
  

验证 #

执行ng serve或ng build，确认项目正常启动和构建。

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