带有 angular-cli 的 angular2 中的环境特定服务端点答案

【问题标题】：Environment specific service endpoint in angular2 with angular-cli带有 angular-cli 的 angular2 中的环境特定服务端点
【发布时间】：2017-01-03 04:50:19
【问题描述】：

我正在为我的 angular2 项目使用 angular-cli。

我正在通过我的 angular2 服务调用后端 ajax 服务。

对于不同的任务，我有不同的服务端点 (URL)。我想让这些服务环境变得有意义。

假设我有两个服务

客服：https://localhost:8080/customers
产品服务：https://localhost:8080/products

因为localhost 在我的开发环境中可用。它正在工作

现在假设 x.x.x.x 是我的生产 Web 服务主机 IP 地址。

所以对于生产环境，服务 URL 将是 https://x.x.x.x:8080/customers

请帮助我如何实现这一目标。

我发现 angular-cli.json 文件中有一个块

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

但我现在确实找到了那个环境目录。

如何创建和管理特定于环境的端点？

【问题讨论】：

标签： angular angular-cli

【解决方案1】：

命令 ng new PROJECT_NAME 应该创建两个文件：

src/environments/environment.prod.ts
src/environments/environment.ts

我相信您可以手动创建它。这是生成的代码：

// The file contents for the current environment will overwrite these during build.
// The build system defaults to the dev environment which uses `environment.ts`, but if you do
// `ng build --env=prod` then `environment.prod.ts` will be used instead.
// The list of which env maps to which file can be found in `angular-cli.json`.

export const environment = {
  production: false
};

您可以在两个文件中添加您需要的配置以用于尊重环境：

// src/environments/environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:8080'
};

...

// src/environments/environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://x.x.x.x'
};

仅使用配置：

import { environment } from '../environments/environment';

//...

let url = `${environment.apiUrl}/customers`;

只要确保您导入的是 '../environments/environment' 而不是 '../environments/environment.prod'。

【讨论】：

谢谢，这行得通。现在我正在尝试设置一个模拟环境，而不使用原始服务端点，而是使用一些模拟 JSON 文件作为端点。但是我在发布到 JSON 文件 URL 时遇到了一些问题。这是我的问题。如果你能帮忙，请看看。 stackoverflow.com/questions/41634007/…

【解决方案2】：

您可以像这样在环境文件中声明变量：
process.env.apiHost = "http://myhostfordevorprod"
您应该在导出之前将其放在您的环境文件中：
export const environment = { production: false, //or true };
并在您的组件中访问它，如下所示：
my_var = process.env.apiHost
然后运行ng build --environment=production 或ng build --environment=development 来选择要加载的环境文件。相反，您也可以运行 ng serve --environment=development

【讨论】：