如何在服务器指定目录运行Angular（无需每次执行构建）？

咱们先理清楚你遇到的核心痛点：想在服务器上直接用ng serve实时预览代码修改，不用每次都手动执行ng build --prod，但之前的命令格式不对导致无法正常工作，现在只能通过dist目录访问，效率很低。下面给你一步步解决的方案：

1. 纠正ng serve命令的错误用法 #

你之前的命令存在参数格式问题，正确的参数搭配应该是这样的：

用IP地址访问的正确命令 #

ng serve --host 192.168.100.100 --port 4500 --base-href /angular/my-app/

• --host：只需要填写服务器的纯IP地址（不需要加http://、端口或路径），用来指定Angular开发服务器绑定的网卡IP
• --port：单独指定服务运行的端口（这里是4500）
• --base-href：设置应用的基础路径，必须是相对路径（以/开头结尾），这样Angular会正确加载所有静态资源

执行完这个命令后，你就可以通过http://192.168.100.100:4500/angular/my-app/访问你的应用了，代码修改后会自动热重载，不用再手动build。

用域名访问的正确命令 #

如果你想用http://www.testserver.com访问，需要让开发服务器监听所有网卡（方便外部通过域名访问），命令如下：

ng serve --host 0.0.0.0 --port 4500 --base-href /angular/my-app/

之后就可以通过http://www.testserver.com:4500/angular/my-app/访问你的应用。

2. 为什么你之前的命令无效？ #

• 第一个命令ng serve --host http://192.168.100.100:4500/angular/my-app：--host参数只接受纯IP或主机名，不能包含协议、端口和路径，格式完全错误
• 第二个命令ng serve --base-href http://www.testserver.com/angular/my-app：--base-href应该设置相对路径，而不是完整的URL，这会导致Angular加载资源时路径错误，无法正常运行

3. 简化后续操作：把配置写入angular.json #

如果你不想每次运行ng serve都输入一堆参数，可以把配置写入项目的angular.json文件：
找到projects -> 你的应用名 -> architect -> serve -> options，添加以下配置：

"host": "192.168.100.100",
"port": 4500,
"baseHref": "/angular/my-app/"

之后直接运行ng serve就会自动使用这些参数了。

4. 额外注意事项 #

确保服务器的防火墙已经开放了4500端口，否则外部设备无法访问到Angular开发服务器的服务。

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