Angular 14如何传递并使用自定义命令行标志

方法一：环境变量 + Angular构建配置（简洁方案） #

1. 调整启动命令 #

在启动命令前添加环境变量：

TEST="ABC" ng serve -ssl true --host test.com

Windows系统需改为：

set TEST=ABC && ng serve -ssl true --host test.com

2. 修改angular.json配置 #

打开项目根目录的angular.json，找到architect -> build -> options，添加define节点将环境变量注入应用：

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    // 保留原有配置
    "define": {
      "process.env.TEST": JSON.stringify(process.env.TEST)
    }
  }
}

3. 在environment.ts中获取参数 #

修改src/environments/environment.ts，直接读取注入的变量：

export const environment = {
  production: false,
  test: process.env.TEST || '默认值'
};

方法二：自定义Webpack扩展（灵活方案，支持多参数） #

1. 安装依赖 #

npm install @angular-builders/custom-webpack yargs --save-dev

2. 替换Angular构建器 #

修改angular.json中的build和serve节点，替换为自定义Webpack构建器：

"build": {
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "customWebpackConfig": {
      "path": "./webpack.extra.js"
    },
    // 保留原有配置
  }
},
"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server",
  // 保留原有配置
}

3. 编写自定义Webpack配置 #

在项目根目录创建webpack.extra.js，通过DefinePlugin注入命令行参数：

const webpack = require('webpack');
const argv = require('yargs').argv;

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.TEST': JSON.stringify(argv.test || '默认值')
    })
  ]
};

4. 调整启动命令 #

直接传递--test参数：

ng serve -ssl true --host test.com --test="ABC"

5. 在environment.ts中读取参数 #

同方法一，直接读取变量即可：

export const environment = {
  production: false,
  test: process.env.TEST || '默认值'
};

注意事项 #

• 修改angular.json后需重启ng serve，配置才会生效
• 若需传递多个参数，可在webpack.extra.js中添加更多process.env.XXX节点

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