如何在 Angular 2 应用程序中配置不同的开发环境

Question

我有一个常量文件

export class constants {
    public static get API_ENDPOINT(): string { return 'https://dvelopment-server/'; }
}

然后我将它导入到我的服务中

private _registrationUrl = constants.API_ENDPOINT+'api/v1/register';

如何使用 server change 更改端点。我有开发服务器登台服务器和本地服务器。我希望应用程序检测环境变化。

在我的 angular 1 应用程序中，我为此使用了 envserviceprovider。我可以在 Angular 2 应用程序中使用相同的吗？

Answer 1

@cartucho 的回答非常有效，直到您尝试使用 Heroku 或 Github 操作等服务部署到多个环境。这些服务使使用节点环境变量变得容易，但无法配置特定于环境的构建命令。

解决这个问题的一种方法是像@cartucho 建议的那样设置你的 Angular 环境变量，然后设置你的构建脚本来调用一个小节点应用程序。节点应用程序读取节点环境变量，然后决定运行哪个构建命令。

在 package.json 中："build": "node build-app.js",

构建-app.js：

const { exec } = require('child_process');

let buildScript = 'ng build --configuration=staging';
if (process.env.ANGULAR_ENVIRONMENT_CONFIGURATION === 'production') {
    buildScript = 'ng build --configuration=production';
}
const child = exec(buildScript, function (err, stdout, stderr) {
    if (err) throw err;
    else console.info(stdout);
});

child.stdout.on('data', function (data) {
    process.stdout.write(data);
});

child.stderr.on('data', function (data) {
    process.stdout.write(data);
});

child.on('exit', function (data) {
    process.stdout.write("I'm done!");
});

我会在我的博文中更详细地讨论 Angular Universal 所需的额外步骤：https://dev.to/jfbloom22/a-better-way-to-deploy-angular-universal-to-multiple-environments-206j

Answer 2

简答：使用Angular CLI。它处于测试阶段，但效果非常好，Angular 团队推荐它用于启动新项目。使用此工具，您可以配置不同的环境。在构建时，src/client/app/environment.ts 将替换为 config/environment.dev.ts 或 config/environment.prod.ts，具体取决于当前 CLI 环境。

环境默认为dev，但您可以通过ng build -prod 或ng serve -prod 中的-prod 标志生成生产版本。鉴于这是一项新功能，它可能会有点令人困惑，因此请查看 this great guide 以获取有关如何使用 CLI 设置 Angular 环境的更多信息。

希望这会有所帮助。

Answer 3

希望对你有帮助。

首先，创建 development.ts、staging.ts、production.ts 配置文件。 其次，在你的 index.pug 中，按如下方式导入环境文件：

   SystemJS.import("#{settings.env}").then(function(env) {
       System.import("app").catch(console.error.bind(console));
   } // Promise.all also works!

请记住，在 nodeJS/Pug/Jade settings.env 中包含 NODE_ENV 值。

最后，你的 system.config.ts 映射应该有以下几行：

    "development": "myUrl/configs/development.js",
    "staging": "myUrl/configs/staging.js",
    "production": "myUrl/configs/production.js",

Answer 4

export class endPointconfig {

    public static getEnvironmentVariable() {
        let origin = location.origin;
        let path = location.href.split('/')[3];
        let value = origin +'/'+ path + '/api/';`enter code here`       
        return value;
    }
}

Answer 5

我只想在@Cartucho 提供的答案中添加更多亮点。他对为您的 Angular 2 应用程序设置个性化环境所需的步骤是正确的。 我也想对Guide to Build the app in different environments的文章发表意见

但是给定的文章错过了一个重要步骤。设置个性化环境的步骤如下： 1）在项目的环境文件夹中创建一个名为 environment.YourEnvName.ts 的新文件。 2）在“环境”对象中添加环境描述 angular-cli.json 文件。

"environments": {
    "source": "environments/environment.ts",
    "prod": "environments/environment.prod.ts",
    "dev": "environments/environment.dev.ts", 
    "qa": "environments/environment.qa.ts",
    "YourEnvName": "environments/environment.YourEnvName.ts"
  }

3) 完成这些更改后，您可以使用以下命令为您的新环境构建应用程序。

ng build --environment=YourEnvName or 

ng serve --environment=YourEnvName 

希望这篇文章对任何新的 Angular 2 开发人员有所帮助。

Answer 6

我已经通过添加类方法解决了这个问题

export class config {

    public static getEnvironmentVariable(value) {
        var environment:string;
        var data = {};
        environment = window.location.hostname;
        switch (environment) {
            case'localhost':
                data = {
                    endPoint: 'https://dev.xxxxx.com/'
                };
                break;
             case 'uat.server.com':
                data = {
                    endPoint: 'https://uat.xxxxx.com/'
                };
                break;

            default:
                data = {
                    endPoint: 'https://dev.xxxx.com/'
                };
        }
        return data[value];
    }
}

为我服务

private _loginUrl = config.getEnvironmentVariable('endPoint')+'api/v1/login;