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

Question

我有一个常量文件

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

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

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

如何通过更改服务器来更改端点。我有开发服务器暂存服务器和本地服务器。我想让应用程序检测环境变化。

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

Answer 1

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

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;

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

我想补充一下@Cartucho 提供的答案。对于为您的 angular 2 个应用程序设置个性化环境所需的步骤，他是正确的。我还想赞成 Guide to Build the app in different environments

上的文章的观点

但是给定的文章错过了重要的一步。设置个性化环境的步骤如下： 1) 在项目的环境文件夹中创建一个名为 environment.YourEnvName.ts 的新文件。 2）在"environments"对象中添加Environment描述 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

希望这篇 post 对任何 Angular 2 开发新手有所帮助。

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

希望对您有所帮助。

首先，创建 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!

Remember that in nodeJS/Pug/Jade settings.env contains the NODE_ENV value.

最后，您的 system.config.ts 地图应包含以下几行：

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

Answer 6

@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!");
});

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

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

How to config different development environment in Angular 2 app

angular

angular2-services