Question

我正在 Angular 9 中开发一个多租户系统，每个租户都有不同的环境。因此，我需要为不同租户的不同环境生成构建。例如：

function add_my_css() {
        wp_enqueue_style( 'my_css', research_url.'/css/style.css' );
        wp_enqueue_style( 'bootstrap_css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css' );
}
add_action( 'admin_enqueue_scripts', 'add_my_css' );`

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

Answer 1

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

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

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

然后在您的npm script中写一个package.json

...
'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作为子进程并将环境变量传递给子进程来完成。

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,
});

使用此方法，您可以传入任何这样的命令行环境变量，并在运行时在Angular中访问它们

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

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

2 个答案: