Question

我正在为angular2项目取得angular-cli。

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

我为不同的任务提供不同的服务端点（URL）。我想让这些服务环境有意义。

假设我有两个服务

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

由于localhost在我的开发环境中可用。它正在运作

现在假设x.x.x.x是我的生产网络服务主机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"
}

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

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

Answer 1

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

src / environments / environment.prod.ts
的src /环境/ 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'。

Answer 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

具有angular-cli

2 个答案: