Question

我有一个常量文件

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

我将其导入我的服务

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

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

在我的angular 1 app中，我使用了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标记生成生产版本。鉴于这是一个新功能，它可能有点混乱，所以请查看this great guide以获取有关如何使用CLI设置Angular Environments的其他信息。

希望这有帮助。

Answer 2

我想补充说明@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 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;

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!

请记住，在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 6

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

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

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

build-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

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

6 个答案: