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

Question

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

const map1 = new Map([["key1", "val1"], ["key2", "val2"]]);
const map2 = new Map([["key1", "val1"], ["key2", "val2"]]);
const map3 = new Map([["key2", "val2"], ["key1", "val1"]]);

console.log(areEqual(map1, map2)); // true
console.log(areEqual(map1, map3)); // false
console.log(areSetEqual(map1, map2)); // true
console.log(areSetEqual(map1, map3)); // true

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

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

Answer 1

我不相信您可以通过环境文件控制代理功能。另一种方法是在您的环境文件中定义您的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路径

Answer 2

实际上，你可以这样做，你只需要配置路由器：

{
    "/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"
        }
    }
}

这样做：

• 你的网址匹配proxy =＆gt;将调用目标定义
• 主机网址匹配一个路由器配置=＆gt;使用新目标

例如：

我已经部署在 localhost：4200 我的角度应用上，当调用网址＆＃34; api / callMeMaybe＆＃34;时，路由器检测到它并重定向到＆＃34 ; http://localhost:3000/exampledomain＆＃34 ;.
如果我已经在 staging.exampledomain.com 上，那么重定向将是＆＃34; http://api.stagging.exampledomain.com＆＃34;。
然后，如果没有匹配，则保持原始目标重定向。

小心，因为订单很重要（第一场比赛将会进行）

以下documentation example

修改

您可以在Chrome调试器的“网络”标签上找到主机值并选择api调用，您会收到以下详细信息：