如何修改 Angular 运行的主机和端口 ?

在 Angular 中,host 指的是应用程序可访问的域名或 IP 地址,而 port 指的是应用程序通过它与网络通信的特定网关。默认情况下,Angular 应用运行在 localhost 上,端口号是 4200。在某些情况下,更这些默认设置是必要的,例如在不同的环境中部署应用程序或避免端口冲突的情况下。

使用 Angular CLI

Angular CLI 提供了一种简单的方式来修改这些设置。

在不同的 port 上启动 Angular 服务器

复制代码
ng serve --port 8000

在不同的 host 上启动 Angular 服务器

复制代码
ng serve --host 0.0.0.0

还可以同时更改 host 和 port

复制代码
ng serve --host 0.0.0.0 --port 8000

这些命令对于临时更改非常实用,通常在开发阶段使用。

修改 Angular.json

要想获得更持久的解决方案,特别是对于共享项目设置,需要修改 "angular.json"文件。

json 复制代码
"serve": {
  "options": {
    "port": 8000,
    "host": "0.0.0.0"
  }
}

此方法确保每次运行 ng server 时,它都使用指定的主机和端口设置。

特定环境配置

在实际情况下,您的应用程序可能需要不同的设置用于开发,测试和生产环境。Angular 允许您创建不同的环境文件来处理此操作,例如:"environment.prod.ts","environment.ts"。您可以在这些文件中定义主机和端口设置,并使用 Angular 的特定于环境的配置应用它们。

最佳实践

在自定义主机和端口设置时,遵循以下最佳实践非常重要。

(1) 确保设置在不同的开发环境中是一致的,以避免集成问题。

(2) 在设置主机时,特别是在生产环境中,要考虑安全问题。除非必要,否则避免使用 0.0.0.0,因为它使您的应用程序可以从任何 IP 地址访问。

(3) 记录主机和端口设置的任何更改,特别是在团队中工作时。这确保了每个人都知道自定义配置。

(4) 在设置自定义端口之前,请始终检查端口冲突,特别是在同一台机器上运行多个应用程序时。

我的开源项目

相关推荐
代码小学僧9 小时前
为什么我推荐前端项目都应该使用 TanStack Query 管理接口请求
前端·react.js·axios
YukiMori239 小时前
深入理解 JavaScript 箭头函数的 this:为什么 DOM 事件不推荐用箭头函数?
前端·javascript·dom
不会敲代码19 小时前
防抖与节流:从输入框看性能优化
前端·javascript·面试
xiyueyezibile9 小时前
零代码基础?AI 助你免费“搬空”语雀知识库
前端·ai编程
不会敲代码19 小时前
React 受控组件与非受控组件完全指南
前端·react.js
不会敲代码19 小时前
React Hooks 进阶:useRef 核心用法与受控/非受控组件实战解析
前端·react.js·面试
恋猫de小郭9 小时前
Android 官方正式官宣 AI 支持 AppFunctions ,Android 官方 MCP 和系统级 OpenClaw 雏形
android·前端·flutter
Moment10 小时前
一周重写 Next.js?Cloudflare 和 AI 做到了😍😍😍
前端·javascript·后端
CodeSheep10 小时前
同事去年绩效是C,提离职领导死活不让走,后来领导私下说他走了,就没人背这个绩效了
前端·后端·程序员
摸鱼的春哥11 小时前
春哥的Agent通关秘籍12:本地RAG实战(中下)向量化与落库
前端·javascript·后端