如何将我的服务器端口指定给 Angular 应用程序？（角度 10）答案

【问题标题】：How to specify port of my server to Angular application? (Angular 10)如何将我的服务器端口指定给 Angular 应用程序？（角度 10）
【发布时间】：2021-03-21 18:02:30
【问题描述】：

我有一个简单的 Angular 应用程序（Angular 10）和一个用 NodeJs 编写的简单服务器。我的服务器应用程序在端口 3000 上运行，我的 Angular 应用程序在端口 4200 上运行。我创建了 proxy.conf.json 文件，指定了我的服务器的 url。但是如何让 http 客户端不向 localhost:4200 请求，而是向 localhost:3000 请求？

【问题讨论】：

使用http://localhost:3000/...开始您的请求
现在主要的问题是什么，可以同时运行angular和node吗？
如果问题得到解决，请将答案标记为已接受。谢谢

标签： node.js angular

【解决方案1】：

解决方案 A（非最佳做法）

如果您愿意，可以在 http 请求中对其进行硬编码

this.httpClient.get(
           "http://localhost:3000/your path", { responseType: 'text' }
        )

解决方案 B（用作属性，但所有阶段都相同）

您可以在 environment.ts 中提取环境的基本 url 路径

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

然后在你的服务中使用它

import { environment } from 'src/environments/environment';
this.httpClient.get(
               environment.apiUrl +"/your path", { responseType: 'text' }
            )

解决方案 C（与解决方案 B 相同，但会在不同阶段为您提供不同的属性）

如果您希望开发和生产使用不同的 apiUrl，您可以使用不同的环境，例如 environment.dev.ts 、 environment.prod.ts 然后在您的 angular.json 中，您可以将这些环境配置为

"production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ]
}

 "dev": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.dev.ts"
            }
          ]
}

然后你可以选择使用 ng serve 命令执行的环境

ng serve --configuration=dev -> dev environment loaded
ng serve --configuration=production -> production environment loaded

【讨论】：

【解决方案2】：

您需要在 NodeJS 服务器上提供 Angular 应用程序。

ng 服务于 4200 端口，只供你做热测试。

【讨论】：