在运行 Angular 应用程序时检测环境详细信息答案

【问题标题】：Detect Environment details while running Angular application在运行 Angular 应用程序时检测环境详细信息
【发布时间】：2020-11-27 14:12:20
【问题描述】：

我有一个使用 VSTS 构建管道构建并推送到 Octopus 的 Angular 应用程序。而从章鱼，部署到不同的环境。

当然，我也不能直接部署到 UAT 中。所以首先部署到 DEV 和相同的构建到 UAT 以及从 UAT 到 PRD 的相同构建。

所以我的问题是我的 app.module.ts 中有一些值在不同的环境中是不同的。但由于到处都使用相同的版本，我无法让它有所不同。所以我认为Angular应用程序必须了解它是哪个环境（dv1/dv2/st1/st2/prd），从而切换值。

这可能吗？或者我怎样才能做到这一点？

【问题讨论】：

标签： angular deployment build azure-pipelines octopus-deploy

【解决方案1】：

我和你有同样的要求。我实际上有 Dev > QA > Stag > Prod，所有环境都只有一个版本。

我通过在 index.html 中调用 host.js 文件来实现，该文件负责告诉我我的应用程序当前正在运行哪个环境。这个 host.js 在 index.html 文件中被调用。

基本上，host.js 将获取 URL 并根据给定的条件确定它所在的环境。

host.js

var host = window.location.host;
var env = "";
if (host.indexOf('stag.myapp.com') >= 0) {
  env = "staging";
} else if (host.indexOf('qa.myapp.com') >= 0) {
  env = "qa";
} else if (host.indexOf('dev.myapp.com') >= 0) {
  env = "dev";
} else if (host.indexOf('myapp.com') >= 0) {
  env = "prod";
} else {
  //Not fall in any condition
  env = "dev";
}

index.html

<script type="text/javascript" src="/assets/js/host.js"></script>

现在将该环境变量放入您的 app.component.ts 中，如下所示。

declare let env;

【讨论】：

听起来不错.. 会试试那个朋友.. 非常感谢

【解决方案2】：

我想分享 Azure Devops 中的另一种方法。

您可以尝试使用Replace Token Task。

此任务可以使用管道变量替换 app.module.ts 文件中的令牌。

这是一个例子：

在app.module.ts文件中，可以设置#{variablename}#为变量值。

  providers: [
    { provide: ENVIRONMENTER, useValue: #{environment}# }
  ],

在VSTS Build中，你可以设置具体的值。

然后您可以使用 Replace Token 任务来替换 app.module.ts 中的值。

例如：

- task: replacetokens@3
  inputs:
    rootDirectory: 'folderpath(contain target file)'
    targetFiles: '**/app.module.ts (file path)'
    encoding: 'auto'
    writeBOM: true
    actionOnMissing: 'warn'
    keepToken: false
    tokenPrefix: '#{'
    tokenSuffix: '}#'
    useLegacyPattern: false
    enableTelemetry: true

在同一个构建中，您可以根据所需的环境更改变量。此方法还支持一次更改多个值。

【讨论】：

但是由于我使用的是 Octopus Deploy，因为环境详细信息在 Octopus 中，这怎么可能。
@SandeepThomas。谢谢你纠正我。此方法需要在构建步骤中确定环境（类似于手动设置）。如果八达通中存在环境信息，则不适用。很抱歉无法提供帮助。