如何在Angular 2 app中配置不同的开发环境

Question

我有一个常量文件

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

我将它导入我的服务

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

如何通过服务器更改来更改endpont.我有开发服务器登台服务器和本地服务器.我希望应用程序检测环境变化.

在我的角度1应用程序中,我使用了envserviceprovider.我可以在角度2应用程序中使用相同的吗？

Answer 1

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

环境默认为dev,但您可以通过-prod任一ng build -prod或中的标志生成生产版本ng serve -prod.鉴于这是一个新功能,它可能有点混乱,所以请查看这个很棒的指南,了解有关如何使用CLI设置Angular Environments的其他信息.

希望这可以帮助.

Answer 2

我想补充说明@Cartucho提供的答案.他对于为angular 2应用程序设置个性化环境所需的步骤是正确的.我还想对不同环境中构建应用程序指南中的文章提出意见

但是,给定的文章错过了一个重要的步骤.设置个性化环境的步骤如下: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 3

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

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;