如何让生产环境的Angular应用支持页面刷新？URL重写方案

问题原因 #

Angular是单页应用（SPA），客户端路由由框架自身处理。直接访问www.mysite.com/customers时，IIS会尝试寻找物理存在的customers文件或目录，而这类资源实际不存在，因此返回404错误。通过应用内按钮导航时，路由切换由Angular在客户端完成，不会向服务器发起新请求，所以页面能正常加载。

两种解决方案的专业分析 #

1. IIS URL重写规则（推荐用于干净URL） #

即便当前没有web.config文件，你可以在Angular部署文件的根目录新建一个，添加以下完整配置：

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

该规则的作用是：当请求的不是实际存在的文件或目录时，将请求重写到根目录的index.html，交由Angular接管路由处理。注意需确保IIS已安装URL重写模块（可通过Web平台安装程序添加）。

2. HashLocationStrategy（快速替代方案） #

你找到的代码完全可行。该策略会在URL中添加哈希前缀（例如www.mysite.com/#/customers），IIS只会处理哈希前的根路径，所有路由逻辑由Angular客户端完成。

实现代码如下：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';

const routes: Routes = [
  // 填写你的应用路由配置
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
})
export class AppRoutingModule { }

优缺点：无需修改服务器配置，实现简单；但URL会包含#，可能影响SEO（现代搜索引擎已支持哈希路由，但仍不如干净URL友好），且不符合部分用户对URL美观性的需求。

方案选择建议 #

• 若希望保持干净的URL结构，优先选择URL重写规则方案，这是Angular官方推荐的服务器端配置方式。
• 若无法修改IIS配置（如缺乏权限）或需要快速解决问题，可使用HashLocationStrategy作为临时或替代方案。

内容的提问来源于stack exchange，提问作者Robert Green MBA