如何在angular2组件中配置服务器API？

Question

我正在开发一个使用Angular2作为前端的Web应用程序。但是，我注意到在我的角度代码中，我需要设置像localhost:9000这样的服务器api来获取数据。在将来，如果我想部署我的工作，我想我应该有一些配置文件来指定它。对于后端部分，我知道如何设置此服务器端口，但我如何在Angular中执行此操作？我怎样才能设置一次，使它在服务器和角度都可以工作？

Answer 1

选项1：

在angular 2项目中创建新文件 proxy.conf.json 添加以下代码以配置API

{
    "/api/*": {
        "target": "http://localhost:9000",
        "secure": false,
        "logLevel": "debug"
    }
}

在你的package.json中修改

"start": "ng serve --proxy-config proxy.conf.json"

无需在上面的示例中的service.ts文件中设置api完整路径：

与您的API一样： http://localhost:9000/users/me

在以下代码中使用 service.ts

private resourceUrl =＆＃39; users / me＆＃39;;

选项2：

在项目的 .angular-cli.json 文件中添加以下代码

"defaults": {
    "styleExt": "css",
    "component": {
    },
    "serve": {
      "port": 4201
    }
  }

选项3：

在 package.json 文件集＆＃34;开始＆＃34;：＆＃34; ng serve --port 4201＆＃34;