如何在 AngularJS 和 Typescript 中实现特定于环境的配置设置

Question

我正在整理一个 AngularJS+Typescript+VisualStudio 项目。我想要一个配置文件，其中包含控制不同设置的常量（例如，REST API URL 和环境名称）。在这种项目中通常是如何完成的？

我可能有一个名为 app.dev.config.ts 的开发配置文件，如下所示：

module app.config {
    export class ConfigSettings {
        static environment(): string { return "dev"; }
        static dataApiBaseUrl(): string { return "DevDataService"; }
    }
}

和这样的 app.prod.config.ts：

module app.config {
    export class ConfigSettings {
        static environment(): string { return "prd"; }
        static dataApiBaseUrl(): string { return "PrdDataService"; }
    }
}

当然这实际上不起作用，因为这两个类同名。

我需要以某种方式进行设置，以便在我的构建服务器中只构建一次，然后可以将其部署到固定 (3) 个环境中。也许这意味着当我将它部署到某个环境时，我还有一个重命名配置文件的额外步骤。这就是我为 C# 项目及其配置文件所做的。

我在网上搜索过这个，但我能找到的只是对 tsconfig.json 个文件的引用。

Answer 1

我找到了解决方案。

1) 我在我的项目中将 env.dev.ts 和 env.prd.ts 等单独的配置文件放在一起。它们的内容如下所示：

angular.module('compdb') //module name matches my main module
    .constant('env', 'prd')
    .constant('key1', 'prd value 1')
    .constant('key2', 'prd value 2');

2) Visual Studio 将这些转译为 env.dev.js，等等

3) 在我的 gulp 文件中，我将 env.*.js 文件复制到我的输出目录。

4) 在我的 Index.cshtml 文件中，我包含 env.js。我在创建 compdb angular 模块

的脚本之后包含了它

5) 当我将我的代码部署到任何环境时，我将适当的配置文件（例如 env.prd.js）重命名为 env.js

如何在 AngularJS 和 Typescript 中实现特定于环境的配置设置

How do I implement environment-specific configuration settings in AngularJS and Typescript

angularjs

typescript

visual-studio-2017

angularjs-1.6

typescript2.4