Angular 17执行npm run watch后，应用运行端口如何查看？

首先明确：npm run watch 对应的本质是 ng build --watch，它的作用仅监听文件变化并自动重新构建项目，本身不会启动开发服务器，所以自然找不到localhost端口。

解决办法分两种场景：

• 直接启动开发服务器（推荐）
  不用npm run watch，直接执行：

  ng serve
  

  或者用默认的npm脚本：

  npm start
  

  默认会在localhost:4200启动服务，要自定义端口的话加参数：

  ng serve --port 3000
  

• 监听构建同时预览静态产物
  如果需要一边监听文件变化自动构建、一边预览生成的静态文件，可以用第三方静态文件工具，比如http-server：

  1. 全局安装工具：

     npm install -g http-server
     

  2. 执行npm run watch让它后台监听构建
  3. 新开终端，进入项目构建后的静态文件目录（默认路径为dist/你的项目名称/browser）：

     cd dist/your-project-name/browser
     

  4. 启动静态服务：

     http-server -p 4200
     

  这样就能在localhost:4200实时预览最新构建的静态内容。

你也可以查看项目根目录的package.json里的scripts字段，会看到watch对应的是ng build --watch，而start对应的是ng serve，这就是两者的核心区别。

内容的提问来源于stack exchange，提问作者Kishan