如何在执行nx angular serve命令时传递自定义标志且不报错？

1. 让Nx允许传递未识别的自定义参数 #

Nx会严格校验所有传入命令的参数是否匹配官方schema，所以首先要修改项目配置关闭这个校验。找到项目（子项目）根目录下的project.json，定位到targets.serve节点，在options里添加"passthroughUnknownOptions": true：

{
  "targets": {
    "serve": {
      "executor": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "你的项目名:build",
        "passthroughUnknownOptions": true // 新增这行，允许未知参数传递
      }
    }
  }
}

加了这个配置后，Nx就不会再因为-t是自定义标志而报错，会直接把它传给底层的Angular dev-server。

2. 在proxy.mjs里解析并处理-t参数 #

现在参数能正常传递到进程中，在proxy.mjs里读取命令行参数，提取-t对应的值：

// proxy.mjs
const args = process.argv;
let targetEnv = 'default'; // 设置默认值
const tFlagIndex = args.indexOf('-t');
// 检查-t是否存在，且后面跟着参数值
if (tFlagIndex !== -1 && args[tFlagIndex + 1]) {
  targetEnv = args[tFlagIndex + 1];
}

// 根据获取到的targetEnv配置不同的代理规则
const proxyConfig = {
  '/api': {
    target: targetEnv === 'example' ? 'https://example-api.com' : 'https://default-api.com',
    changeOrigin: true
  }
};

export default proxyConfig;

3. 关联proxy配置到serve命令 #

如果之前serve目标没指定proxy文件，要在project.json的serve options里补上路径：

"options": {
  "browserTarget": "你的项目名:build",
  "passthroughUnknownOptions": true,
  "proxyConfig": "apps/你的项目名/proxy.mjs" // 替换成你实际的proxy文件路径
}

4. 测试验证 #

执行nx angular serve -t example，此时Nx不会再抛出't'不在schema的错误，proxy.mjs会正确读取到example参数，并应用对应的代理配置。

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