ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

Angular 前端端口号修改的几种方式

Angular 前端端口号修改的几种方式

4200 被占是 Angular 开发里最常见的问题之一。

按 从“临时 → 永久” 给你排一下,挑最适合你的。

方法一(最快):启动时指定端口【最常用】

在项目根目录直接运行:

ng serve--port4300

或者顺手把 host 也一起指定(有时跨设备/代理用得到):

ng serve--host0.0.0.0--port4300
  • 只对这次启动生效
  • 适合:临时测试、端口冲突

方法二(推荐):在 angular.json 里永久改端口

这是最标准、最干净的做法。

1. 打开 angular.json

找到你的项目名(假设叫 my-app):

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

2. 把 4200 改掉

例如:

"options":{"port":4300}

保存后直接:

ng serve

以后默认就是 4300

方法三:改 package.json 的 npm script(团队友好)

如果你是用:

npm run start

那就改这里👇

package.json"scripts":{"start":"ng serve --port 4300"}

优点:

  • 所有人 npm start 都是同一个端口

  • 不用记参数

常见坑位(你如果还不生效,重点看这里)

1. 你在用 Vite / Nx / 自定义 dev server

确认是不是:

ng serve

而不是 vite, nx serve, npm run dev

2. 4200 被谁占了?

如果想确认是谁占了 4200:

Windows(你是 Win)

netstat-ano|findstr:4200

然后:

tasklist|findstr<PID>

推荐一个“稳妥端口组合”(给你这种多项目开发)

我自己常用:

项目端口
Angular 前端4300
React / Vite5173
Spring Boot8080
Keycloak8081

不要执着 4200
端口只是开发期的“临时门牌号”,统一、好记就行。

返回列表