Angular运行ng serve报错：Webpack配置不符合API schema

该问题由Angular版本与构建配置不兼容导致：
你当前使用的是v17及以上的最新版Angular，但angular.json中build目标仍在使用已被废弃移除的旧版webpack构建器@angular-devkit/build-angular:browser。新版Angular默认采用基于esbuild的@angular-devkit/build-angular:application构建器，旧构建器依赖的webpack配置规则与新版内置的webpack版本API schema完全不匹配，构建进程初始化webpack时校验失败，就会卡在生成浏览器应用包的步骤抛出该错误。

按以下操作调整配置即可正常启动项目：

• 打开项目根目录的angular.json文件，定位到projects.my-app.architect.build节点
• 将该节点下的builder字段值从@angular-devkit/build-angular:browser替换为@angular-devkit/build-angular:application
• 调整options下的入口配置：把原main字段改名为browser，字段值保持src/main.ts不变，其余polyfills、assets、styles、scripts等配置无需改动
• 清理无效配置：找到configurations.development节点，删除vendorChunk、namedChunks两个配置项，这两个是旧webpack构建器独有的配置，新构建器无法识别
• 检查同层级的serve节点，确认其builder为@angular-devkit/build-angular:dev-server即可，该配置无需额外修改，会自动适配新的application构建器

调整完成后的build核心配置参考如下：

"build": {
  "builder": "@angular-devkit/build-angular:application",
  "options": {
    "outputPath": "dist/my-app",
    "index": "src/index.html",
    "browser": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "assets": [
      "src/favicon.ico",
      "src/assets"
    ],
    "styles": [
      "src/styles.css"
    ],
    "scripts": []
  },
  "configurations": {
    "production": {
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "500kb",
          "maximumError": "1mb"
        },
        {
          "type": "anyComponentStyle",
          "maximumWarning": "2kb",
          "maximumError": "4kb"
        }
      ],
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      "outputHashing": "all"
    },
    "development": {
      "buildOptimizer": false,
      "optimization": false,
      "extractLicenses": false,
      "sourceMap": true
    }
  },
  "defaultConfiguration": "production"
}

配置修改完成后，直接在终端重新执行ng serve即可正常启动项目。如果之前有启动失败的残留缓存，可以先删除项目根目录的.angular缓存文件夹再执行命令，启动速度会更快。

不建议为了兼容旧构建器降级Angular版本，新的esbuild构建器相比旧webpack构建器的冷构建、热更新速度有3-5倍的提升，开发体验明显更好。

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