如何在 Angular 中使用另一个端口

在 Angular 应用程序中，我们可以使用默认端口来运行我们的应用程序。但是，有时我们需要使用不同的端口来访问我们的应用程序。在这篇文章中，我将向您展示如何在 Angular 中使用另一个端口。

更改 Angular 应用程序的端口

通常情况下，Angular 应用程序使用默认端口 4200 运行。如果我们需要使用不同的端口，则需要更改应用程序的配置。我们可以使用 ng serve 命令以不同的端口来启动应用程序。例如，我们可以使用以下命令来使用端口号 8080 运行我们的应用程序：

ng serve --port 8080

除了使用命令行参数更改端口外，我们还可以在 angular.json 文件中指定端口。在 projects 对象中，我们可以找到我们的项目，并找到 architect > serve > options 对象。在这里，我们可以设置 port 属性来指定要使用的端口：

{
  "projects": {
    "my-app": {
      "architect": {
        "serve": {
          "options": {
            "port": 8080
          }
        }
      }
    }
  }
}

在代码中访问不同的端口

如果我们使用另一个端口来运行我们的应用程序，我们需要相应地更改我们的代码。让我们看看如何在代码中访问不同的端口。

在 HttpClient 中使用另一个端口

如果我们在 Angular 应用程序中使用 HttpClient 来进行 HTTP 请求，那么我们需要使用正确的端口来访问我们的 API。我们可以使用 HttpClient 的 get() 方法，并传入完整的 API 地址，包括端口号。例如，如果我们的 API 在端口号 3000 上运行，则可以使用以下代码来获取数据：

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  private apiUrl = 'http://localhost:3000/data';

  constructor(private http: HttpClient) { }

  getData(): Observable<any> {
    return this.http.get<any>(this.apiUrl);
  }

}

在 WebSocket 中使用另一个端口

如果我们在 Angular 应用程序中使用 WebSocket 连接，我们需要相应地更改我们的代码。我们需要在 WebSocket 构造函数中传入正确的协议、主机和端口。例如，如果我们的 WebSocket 在端口号 8080 上运行，则可以使用以下代码来连接 WebSocket：

const ws = new WebSocket('ws://localhost:8080');

结论

在 Angular 中使用另一个端口非常简单。我们可以通过命令行参数或在 angular.json 文件中更改端口，然后在代码中使用正确的端口来访问我们的 API 或 WebSocket。希望本文对您有所帮助！