Angular CLI：在现有命令中添加自定义参数

Question

我正在 Angular9 开发多租户系统，我们为每个租户提供不同的环境。所以我需要为不同租户的不同环境生成构建。例如：

ng build --prod --tenant=T1
ng build --configuraton=uat --tenant=T1
ng build --prod --tenant=T2
ng build --configuraton=uat --tenant=T2

我已经为不同的租户设置了不同的配置文件。我需要将此租户名称从命令行参数中提取到代码中，并基于它应用配置。有什么办法可以完成这种整合吗？欢迎任何建议。谢谢

Answer 1

我认为 angular-cli 无法立即使用此功能。您需要编写 npm script 或 shell script 来完成此任务。

因此，如果您想在 angular 应用程序中访问这些租户名称。您可以在 index.html 的脚本标记内放置一个占位符全局变量像 -

...
    <script>
    window['tenantId'] = 'TENANT_ID'
    </script>
...

然后在你的package.json

中写一个npm script

...
'replace-tenant-id': 'node replace-tenant-id.js --tenant=T1 && ng build --prod'
...

其中 replace-tenant-id.js 将包含替换 'TENANT_ID'

的逻辑

const fs = require('fs')
fs.readFile(index.html, 'utf8', function (err,data) {

  let formatted = data.replace(/TENANT_ID/g, process.argv[2]);

 fs.writeFile(index.html, formatted, 'utf8', function (err) {
    if (err) return console.log(err);
 });
});

P.S。 - 如果有任何拼写错误或语法错误，请调试，因为我没有尝试过运行这段代码。以类似的方式，您也可以容纳配置标志。

Answer 2

这可以通过使用自定义 webpack 构建器并调用 ng serve 作为子进程并将环境变量传递给子进程来完成。

Here is a step by step guide 说明了如何完成此操作：

import * as yargs from 'yargs';
import { spawn } from 'child_process';
import { DEFAULT_APP_ENV } from './app-env';

const parseNgArgs = () => process.argv.filter((arg, index) => index > 1 && Object.keys(DEFAULT_APP_ENV).every(key => !arg.includes(key)));

const ngArgs = parseNgArgs();

const argv = { ...DEFAULT_APP_ENV, ...yargs.argv};

const childProcess = spawn('yarn', ['build', ...ngArgs], {
  stdio: 'inherit',
  env: { ...process.env, APP_ENV: JSON.stringify(argv) },
  shell: true,
});

使用它，您可以像这样传入任何 command-line 环境变量，并在运行时在您的 Angular

中访问它们

yarn build --tenant=T1 --logErrors --no-runtimeChecks --loggerHost="http://localhost:6000"

Angular CLI：在现有命令中添加自定义参数

Angular CLI: add custom arguments in existing command

angular-cli

angular