执行ng serve时能否向environment.ts传递变量控制运行配置

方案一：使用Angular原生配置（无额外依赖，更稳定） #

这是最推荐的实现方式，无需修改构建逻辑，仅通过Angular自带的配置能力就能实现切换：

• 第一步：在src/environments目录下新增两套配置文件
  新建environment.stub.ts（对应stub数据模式），内容和原environment.ts一致，仅connectToBackend设为false
  新建environment.backend.ts（对应对接Spring Boot后端模式），内容和原environment.ts一致，仅connectToBackend设为true
• 第二步：修改angular.json注册配置
  找到projects → 你的项目名 → architect → build → configurations节点，新增两个配置项：

  "stub": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.stub.ts"
      }
    ]
  },
  "backend": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.backend.ts"
      }
    ]
  }
  

  再找到projects → 你的项目名 → architect → serve → configurations节点，新增对应配置：

  "stub": {
    "browserTarget": "你的项目名:build:stub"
  },
  "backend": {
    "browserTarget": "你的项目名:build:backend"
  }
  

• 第三步：通过命令直接切换
  启动stub模式：ng serve -c stub
  启动对接后端模式：ng serve -c backend
  也可以把命令写入package.json的scripts节点简化操作：

  "scripts": {
    "start:stub": "ng serve -c stub",
    "start:backend": "ng serve -c backend"
  }
  

  后续直接运行npm run start:stub或npm run start:backend即可切换。

方案二：自定义命令行传参（匹配你要的参数传递形式） #

如果一定要通过--connectToBackend=true类的参数直接控制，需要修改构建配置：

• 第一步：安装适配Angular11的依赖

  npm i @angular-builders/custom-webpack@11 dotenv cross-env -D
  

• 第二步：项目根目录新增webpack.config.js

  const webpack = require('webpack');
  module.exports = {
    plugins: [
      new webpack.DefinePlugin({
        'process.env.CONNECT_TO_BACKEND': JSON.stringify(process.env.CONNECT_TO_BACKEND || 'false')
      })
    ]
  };
  

• 第三步：修改angular.json的构建器配置
  找到projects → 你的项目名 → architect → build，将builder的值从@angular-devkit/build-angular:browser改为@angular-builders/custom-webpack:browser，并在options节点下新增：

  "customWebpackConfig": {
    "path": "./webpack.config.js"
  }
  

  再找到projects → 你的项目名 → architect → serve，将builder的值从@angular-devkit/build-angular:dev-server改为@angular-builders/custom-webpack:dev-server
• 第四步：修改src/environments/environment.ts的取值逻辑
  把原来硬编码的let connectToBackend = false;替换为：

  let connectToBackend = process.env.CONNECT_TO_BACKEND === 'true';
  

  若TypeScript报错process未定义，在src目录下新增typings.d.ts文件，写入declare var process: { env: { [key: string]: string } };即可。
• 第五步：运行命令
  启动对接后端模式：cross-env CONNECT_TO_BACKEND=true ng serve
  启动stub模式：ng serve（默认取false）

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