如何让Angular 4在IIS指定URL调试运行而非localhost:4200？

我完全懂你的需求——不想每次调试都要构建复制dist，而是直接用npm start就能打开自定义的IIS域名（比如app.myapp.local）运行Angular应用，同时保留完整的调试能力，还要和已有的.NET Core API无缝配合对吧？下面给你两种可行的方案，你可以根据自己的环境选择：

方案一：直接配置Angular CLI绑定自定义域名 #

这种方式不需要改动IIS的现有配置，直接让Angular开发服务器绑定到你的自定义域名：

1. 映射本地域名到127.0.0.1
   打开C:\Windows\System32\drivers\etc\hosts文件（需要管理员权限编辑），添加一行：

   127.0.0.1 app.myapp.local
   

   这样你的电脑就能识别这个自定义域名了。

2. 修改Angular CLI的启动配置
   因为你用的是Angular 4，配置文件是.angular-cli.json，找到里面的defaults节点，添加serve配置：

   "defaults": {
     "serve": {
       "host": "app.myapp.local",
       "port": 8080, // 选一个不被IIS占用的端口，比如8080
       "open": true // 启动后自动打开浏览器
     }
   }
   

   或者你也可以直接修改package.json里的start脚本，把命令改成：

   "scripts": {
     "start": "ng serve --host app.myapp.local --port 8080 --open"
   }
   

3. 配置API代理避免跨域
   因为你的API部署在IIS的app.myapp.local下，Angular开发服务器在8080端口，直接调用会有跨域问题。在Angular项目根目录创建proxy.conf.json文件，内容如下：

   {
     "/api/*": {
       "target": "http://app.myapp.local",
       "secure": false,
       "changeOrigin": true
     }
   }
   

   然后更新start脚本，加上代理配置：

   "start": "ng serve --host app.myapp.local --port 8080 --open --proxy-config proxy.conf.json"
   

   这样Angular里所有以/api开头的请求都会自动转发到IIS上的API，完美解决跨域。

现在运行npm start，浏览器就会自动打开http://app.myapp.local:8080，你可以直接调试，热重载也能正常工作。

方案二：用IIS反向代理转发到Angular开发服务器 #

如果你希望访问app.myapp.local时不用加端口（直接用80端口），可以让IIS做反向代理，把请求转发到Angular的开发服务器：

1. 安装IIS反向代理模块
   先确保IIS安装了URL Rewrite和Application Request Routing (ARR)这两个模块，你可以通过IIS管理器的“模块”面板查看，没装的话直接下载安装即可。

2. 启用ARR代理功能
   打开IIS管理器，找到“Application Request Routing Cache”，双击打开后，在右侧面板点击“Server Proxy Settings”，勾选“Enable proxy”，保存设置。

3. 添加URL重写规则
   在你的IIS站点（比如默认网站下的myapp应用）上，打开“URL Rewrite”，点击右侧“Add Rule(s)”，选择“Blank Rule”：

   • 名称：随便取，比如Forward to Angular Dev Server
   • 匹配URL：
     • 请求路径：.*
     • 检查输入是否匹配：Regular Expressions
   • 条件：添加两个条件：
     1. 输入：{REQUEST_FILENAME}，匹配类型：Is Not File
     2. 输入：{REQUEST_FILENAME}，匹配类型：Is Not Directory
   • 操作：
     • 操作类型：Rewrite
     • 重写URL：http://localhost:4200/{R:0}
     • 勾选“Stop processing subsequent rules”

4. 启动Angular开发服务器
   正常运行npm start，Angular会默认在localhost:4200启动。现在你访问http://app.myapp.local，IIS会自动把请求转发到Angular开发服务器，同时API请求直接走IIS本身，完全没有跨域问题，调试和热重载都能正常用。

注意事项 #

• 如果你用方案一，要确保选的端口没有被IIS或其他服务占用；
• Angular 4的配置文件是.angular-cli.json，不要和Angular 6+的angular.json搞混；
• 调试时，VS的断点依然可以正常触发，因为Angular开发模式下的源码映射是完整的。

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