如何配置Angular 15以使用ESBuild构建项目？

你看到的警告是因为 Angular 15 里，基于 esbuild 的构建器仅支持 ng build 命令，ng serve（开发服务器）还不支持这个实验性构建器，所以会自动切回稳定的 Webpack 构建器。

下面是正确的配置方式：

• 分开配置 build 和 serve 的构建器
  修改 angular.json，只给 build 环节用 esbuild，serve 保持默认的 Webpack 构建器（这是 Angular 15 的限制，没办法在开发服务器用 esbuild）：

  "projects": {
    "你的项目名称": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser-esbuild",
          // 保留你原本的 build 其他配置，比如 outputPath、index 等
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "你的项目名称:build"
          }
          // 保留原本的 serve 其他配置
        }
      }
    }
  }
  

• 验证配置效果

  • 执行 ng build：这时会用 esbuild 做生产构建，终端里能看到 esbuild 的相关日志。
  • 执行 ng serve：还是用 Webpack 开发服务器，这是 Angular 15 的正常表现，直到 Angular 16 才正式支持给 dev-server 用 esbuild 构建器。

如果想在开发环境也用 esbuild，就得升级到 Angular 16 及以上版本，升级后可以把 serve 的构建器改成 @angular-devkit/build-angular:dev-server-esbuild。

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