Angular 2 CLI 中基于环境的不同代理配置答案

【问题标题】：Different proxy config based on environment in Angular 2 CLIAngular 2 CLI 中基于环境的不同代理配置
【发布时间】：2017-08-05 18:33:12
【问题描述】：

如何在 Angular 2 CLI 项目中为开发和生产环境声明 2 个不同的代理 URL？例如，在开发模式下，我想使用

{
    "/api/*": {
        "target": "http://localhost:3000",
        "secure": false
    }
}

但在生产模式下，我会使用

{
    "/api/*": {
        "target": "http://api.exampledomain.com",
        "secure": false
    }
}

【问题讨论】：

在src->environments里面，有2个文件； 1 个用于开发，1 个用于生产。
是的，有。但是要使代理配置起作用，我们需要将上述代码添加到 json 文件中。例如代理.config.json。然后通过ng serve --proxy-config proxy.config.json 调用此文件。那么有没有办法根据环境来改变呢？
那么你不能在运行命令时创建 2 个不同的文件并将其指向 --proxy-config 文件吗？
我认为创建文件不会解决问题。由于在生产构建之后，我既不能在命令行中设置 --proxy-config 也不能工作。请看这个stackoverflow.com/q/40995791/5128818
当你构建一个 Angular 应用程序时，dist 文件肯定会变成一个静态 HTML/JavaScript 应用程序，并被复制到 Web 应用程序服务器以进行生产。因此，您只在开发而不是生产中使用 angular-cli 的服务器。我在这里错过了什么吗？

标签： angular angular2-cli

【解决方案1】：

其实可以，只需要配置路由器即可：

{
    "/api": {
        "target": "https://api.exampledomain.com",
        "secure": false,
        "logLevel": "debug",
        "router": {
          "localhost:4200" : "http://localhost:3000/exampledomain",
          "staging.exampledomain.com" : "http://api.staging.exampledomain.com"
        }
    }
}

这是做什么的：

你的 url 匹配代理 => 将调用定义的目标
主机 url 匹配一个路由器配置 => 使用新目标

例如：

我已经在 localhost:4200 上部署了我的 Angular 应用，当调用 url “api/callMeMaybe”时，路由器会检测到它并重定向到“http://localhost:3000/exampledomain”。
如果我一直在 staging.exampledomain.com 上，则重定向必须是“http://api.stagging.exampledomain.com”。
然后，如果没有匹配，它保持原来的目标重定向。

小心，因为顺序很重要（将进行第一场比赛）

这是documentation 和example

编辑

您可以在 chrome 调试器网络选项卡上找到主机值并选择 api 调用，您会得到以下详细信息：

【讨论】：

【解决方案2】：

我不相信您可以通过环境文件控制代理功能。另一种方法是在您的环境文件中定义您的 api 域

// environment.ts
export const environment = {
    production: false,
    api: 'http://localhost:3000'
};

// environment.prod.ts
export const environment = {
    production: true,
    api: 'http://api.exampledomain.com'
}

然后在你的 ts 源文件中从环境文件中拉取域

// some service
import { Injectable } from '@angular/core';
import { environment } from '../../../environment.ts';
import { Http } from '@angular/http';

@Injectable()
export class SomeService {
    constructor(private http: Http);

    getData(){
        return this.http.get(environment.api + '/rest-of-api');
    }
}

现在，当您运行构建或提供命令时，它们将使用环境文件中定义的 api 路径

【讨论】：