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 / Vite	5173
Spring Boot	8080
Keycloak	8081

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