Angular 2路由（Visual Studio 2017）：刷新URL时出现HTTP 404.0错误

嘿，这个问题我太熟了！从你贴的组件代码来看，组件本身没啥问题，核心原因是Angular的路由模式和服务器配置不匹配，一刷新就404的坑很多人都踩过，我给你拆解清楚：

Angular默认用的是HTML5路由模式（PathLocationStrategy），这种模式下你的URL会是/home、/users这种干净的路径。但浏览器刷新页面时，会直接向服务器请求这个路径对应的文件——可你的Angular是单页应用啊，服务器上根本没有/home或者/users这些物理文件，只有根目录下的index.html，所以服务器就返回404了。

方案一：配置服务器重写规则（推荐，保持干净URL） #

这个方案是让服务器把所有路由请求都转发到index.html，让Angular自己处理路由。不同服务器配置方式不一样：

• Angular CLI开发服务器：其实ng serve已经默认帮你处理了重写，所以开发时刷新没问题，但生产环境部署到自己的服务器就得手动配置：
  • Nginx：在你的站点配置里添加这行规则：

    location / {
      try_files $uri $uri/ /index.html;
    }
    

  • Apache：在项目根目录创建.htaccess文件，写入：

    RewriteEngine On
    # 如果文件不存在，重写到index.html
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ /index.html [L]
    

  • IIS：创建web.config文件，添加重写规则：

    <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="/index.html" />
            </rule>
          </rules>
        </rewrite>
      </system.webServer>
    </configuration>
    

• 还要确保你的Angular项目里已经正确启用HTML5模式：在app-routing.module.ts里配置：

  @NgModule({
    imports: [RouterModule.forRoot(routes, {
      useHash: false, // 保持HTML5模式
      enableTracing: false // 可选，调试路由用
    })],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  

  同时在index.html的<head>里添加基础路径配置：

  <base href="/">
  

  如果你的应用部署在子目录（比如https://example.com/myapp），要改成<base href="/myapp/">。

方案二：切换到Hash模式（简单但URL带#） #

如果不想折腾服务器配置，可以直接改用Hash模式，这种模式下URL会变成/#/home、/#/users，刷新时浏览器只会请求根目录的index.html，Angular会通过哈希值处理路由，不会触发服务器的404。

配置也很简单，在app-routing.module.ts里把useHash设为true：

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    useHash: true, // 启用Hash模式
    enableTracing: false
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

确认你的路由配置里没有拼写错误，比如路由路径和模板跳转的路径是否一致，这也可能导致奇怪的404哦。

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