如何阻止Angular 17 ng serve注入/@vite/client脚本或切换至Webpack？

方案一：通过Vite配置禁用客户端注入 #

目前@angular-devkit/build-angular:dev-server没有直接在angular.json中提供关闭/@vite/client注入的配置项，但可以通过自定义Vite配置实现：

• 在项目根目录创建vite.config.ts文件，添加以下配置：

  import { defineConfig } from 'vite';
  
  export default defineConfig({
    server: {
      injectClient: false
    }
  });
  

• 修改angular.json中serve的配置，指定自定义Vite配置文件路径：

  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "buildTarget": "your-project-name:build",
      "viteConfig": "./vite.config.ts"
    }
  }
  

  替换your-project-name为实际项目名称，重启开发服务器即可生效。

方案二：切换回Webpack开发服务器 #

若方案一无法解决问题，Angular 17仍支持使用升级前的Webpack开发服务器，只需修改angular.json的serve构建器：

• 将serve部分的构建器替换为Webpack版本：

  "serve": {
    "builder": "@angular-devkit/build-angular:webpack-dev-server",
    "options": {
      "buildTarget": "your-project-name:build"
    }
  }
  

  该配置会使用Webpack开发服务器，不会注入/@vite/client脚本，与升级前的运行逻辑一致。

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