代码之家 › 专栏 › 技术社区 › Clint

如何在Angular应用程序的ts文件中访问Angular CLI的“ng-start”命令行变量

angular-cli

Clint · 技术社区 · 3 年前

角度11

我知道这个问题以前有人问过,但我找不到满意的答案。

在angular Cli中,我想运行命令

ng serve -o  --client=someclient

在component.ts文件或service.ts文件中,我想访问客户端变量

if (client){
    this.loadClientConfig(client);
} else {
    this.loadClientConfig('whitelabel');
}

loadClientConfig(c){
    // go load the client config section from a config.json file if it exists (this bit i know how to do)
}

我知道这可以完成通过添加--configuration=someClient,但据我所知,我需要在angular.json文件中添加一个新的配置部分,并为每个客户端添加一个全新的environment.ts文件,我不想这样做。

有办法做到这一点吗?

非常感谢。

0 回复 | 直到 3 年前

Clint 3 年前

回答我自己的问题,以防其他人需要知道。

实现这一目标有4个步骤-

步骤1。在package.json中添加/编辑脚本 (这里的例子是ng-serve,但也可以是build等)

"start":"node set-tenant.js --tenant=somevalue && ng serve -o"

步骤2。在根目录下创建set-tenant.js文件

console.info('Attempting to set  "tenant" variable in index.html');
let tenant = null;
const indexHtml = 'src/index.html';
process.argv.forEach(a => {
  if (a.startsWith('--tenant')){
    tenant = a.split('=')[1];
  }
});
const fs = require('fs')
fs.readFile( indexHtml, 'utf8', function (err, data) {
  if (err){ return console.error(err); }
  if (data.length){
    console.info('Setting  "tenant" variable in index.html to ' + tenant);
    const matchRule = /\/\*tenant-start\*\/.*\/\*tenant-end\*\//g;
    fs.writeFile( indexHtml, data.replace( matchRule, `/*tenant-start*/window['tenantId'] = '${tenant}';/*tenant-end*/`), 'utf8', function (err) {
        if (err) return console.error(err);
    });
  } else {
    return console.error(indexHtml + ' has no content');
  }
});

步骤3。向index.html文件添加代码

<script>/*tenant-start*/window['tenantId'] = 'gtr';/*tenant-end*/</script>

步骤4。访问TS组件和服务文件中的租户变量

// tslint:disable-next-line: no-string-literal
this.tenant = window['tenantId'];

推荐文章

Nipuni Madanayake · npm install-g@angular/cli命令是否会升级angular版本(如果我已经安装了angular)?

2 年前

John Rousseau · 将js组件导入Angular 5

6 年前

Bob Zheng · 数据路径“”不应具有其他属性(dryRun)

6 年前

shehata · 将多个项目(在CLI工作区中)延迟加载到一个大型应用程序

6 年前

Rod · 英雄角巡演-包括测试项目,但不起作用

6 年前

MPoutanen · 角度6:返回HttpHeaders

6 年前

batmaniac · 在ng build angular中运行严格编译

6 年前

Dragouf · angular6:使用cli添加通用支持

6 年前

Paco Zevallos · 角度5更新为6

6 年前

Larry · ng生成组件时出现错误“位置629处JSON中的意外标记/错误”

6 年前