48

我有一个常量文件

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 应用程序中使用相同的吗？

4

6 回答 6

71

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

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

希望这可以帮助。

于 2016-05-29T18:44:45.013 回答
32

我只想为@Cartucho 提供的答案添加更多信息。他对为您的 Angular 2 应用程序设置个性化环境所需的步骤是正确的。我还想支持在不同环境中构建应用程序指南中的文章的观点

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

"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 开发人员都有帮助。

于 2017-01-31T16:49:01.063 回答
1

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

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;
于 2016-03-15T11:28:17.543 回答
0 
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;
    }
}
于 2017-02-23T03:51:53.067 回答
0

我希望它有所帮助。

首先，创建 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",
于 2017-03-22T03:38:58.347 回答
0

@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

于 2021-07-30T17:56:12.327 回答