Angular 7使用ng serve启动时能否移除URL中的端口号？

问题答案 #

可以完全移除ng serve运行时URL的端口号，只需将开发服务器端口改为对应协议的默认端口即可。

差异原因

• ng build仅打包Angular静态资源，本身不启动服务，你看到的无端口URL，是这些资源部署到ASP.NET对应的Web服务（如IIS、Kestrel）时，服务监听的是HTTP默认80端口或HTTPS默认443端口，浏览器对默认端口不会做显式展示。
• ng serve是Angular自带的开发服务器，默认监听4200非默认端口，所以访问URL必须携带端口才能正常访问。

具体配置方法

1. 如果你用HTTP协议访问，直接修改angular.json中serve配置的port为80即可，参考配置如下：

"serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "ng-app:build",
        "port": 80,
        "host": "myapp.withAspweb.local"
      },
}

修改后重启ng serve，直接访问myapp.withAspweb.local即可，URL不会显示端口号。

2. 如果你用HTTPS协议访问，将port改为443，同时新增SSL配置即可，示例如下：

"serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "ng-app:build",
        "port": 443,
        "host": "myapp.withAspweb.local",
        "ssl": true,
        "sslCert": "你的ssl证书路径",
        "sslKey": "你的ssl密钥路径"
      },
}

注意事项

• 80、443属于系统特权端口，启动前需要确认端口没有被IIS、Apache等其他服务占用，否则ng serve会启动报错。
• 如果你是和ASP.NET应用集成开发，更推荐直接配置ASP.NET服务做反向代理，将Angular相关请求转发到默认的4200端口即可，不用修改ng serve端口，访问ASP.NET服务的无端口地址就能直接访问Angular应用。

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