如何修改 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) 在设置自定义端口之前,请始终检查端口冲突,特别是在同一台机器上运行多个应用程序时。

我的开源项目

相关推荐
GIS之路20 小时前
GDAL 实现影像裁剪
前端·python·arcgis·信息可视化
AGMTI20 小时前
webSock动态注册消息回调函数功能实现
开发语言·前端·javascript
不会Android的潘潘20 小时前
受限系统环境下的 WebView 能力演进:车载平台 Web 渲染异常的根因分析与优化实践
android·java·前端·aosp
建军啊20 小时前
java web常见lou洞
android·java·前端
阳无20 小时前
宝塔部署的前后端项目从IP访问改成自定义域名访问
java·前端·部署
Galloping-Vijay20 小时前
解决 WSL2 + Windows Hosts + 开启 VPN 后无法访问本地 Web 服务的问题
前端·windows
不吃香菜的猪20 小时前
使用@vue-office/pdf时,pdf展示不全
javascript·vue.js·pdf
wuhen_n20 小时前
TypeScript的对象类型:interface vs type
前端·javascript·typescript
见路不走!20 小时前
后端返回Blob文件流,前端实现导出
前端
lindd91191120 小时前
4G模块应用,内网穿透,前端网页的制作第七讲(智能头盔数据上传至网页端)
前端·后端·零基础·rt-thread·实时操作系统·项目复刻