在Angular.io中配置HTTP的端口

Question

我想创建一个angular.io应用程序,但其余的API应从不同的服务器端口提供.

来自localhost:4200的Angular内容,来自node express服务器的数据在localhost:3000上独立启动.但是当我注入并使用'http'时,如何配置要使用的端口？

Answer 1

假设您正在使用Angular CLI搭建项目（我希望是这样），那么您应该已经可以访问其他环境设置。这些文件使您可以轻松地为应用程序提供值，该值可能会随其运行位置而变化。

environment.ts提供环境值的接口，然后用environment.qa.ts，environment.prod.ts等等（您可以创建任意多个环境）来指定与该环境相对应的不同值。

假设您的环境文件中包含以下内容：

export const environment = {
    myEndpoint: 'localhost:3000'
}

您可以使用--env标志运行或构建应用程序以获取适当的值：

ng build --env=qa

访问环境配置中定义的值很容易。在您的服务或组件中，只需为环境添加导入：

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

然后使用值：

this.http.get(environment.myEndpoint)

Answer 2

以某种方式获得"正确"URL的解决方案无效.
事实证明,这导致了一种情况,其中在休息服务器上看到http.put(...)作为OPTIONS请求.

通过从角度服务器代理到其余服务器,我找到了一种工作方式:

ng serve --proxy-config proxy.conf.json

proxy.conf.json:

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

Answer 3

just add it to the url

this.http.get('http://localhost:3000')