Angular单页应用刷新/手动输入RouterLink路由报404求助

我之前也踩过这个坑！本质原因是Angular用的是前端路由：正常点击routerLink时，是Angular在浏览器端直接处理页面跳转，不会给服务器发请求；但刷新页面或手动输入子路径（比如website.net/about）时，浏览器会直接向Apache请求对应的物理文件，而服务器上根本没有about这个文件/目录，所以就返回404了。

下面给你两种解决方案，优先推荐前端修改的方案：

优先：前端解决方案（哈希路由模式） #

这个方案不用碰服务器配置，只需要修改Angular的路由配置，把路由改成哈希模式（路径会变成website.net/#/about）。这种模式下，浏览器刷新时只会请求根目录的index.html，Angular会读取URL里的哈希部分来处理路由，不会触发服务器的404。

修改步骤： #

在你的app.module.ts里，给RouterModule.forRoot添加useHash: true配置：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { AppComponent } from './app.component';
import { ProgramsComponent } from './programs/programs.component';
import { AboutComponent } from './about/about.component';

@NgModule({
  declarations: [
    AppComponent,
    ProgramsComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: 'programs', component: ProgramsComponent },
      { path: 'about', component: AboutComponent }
    ], { useHash: true }) // 新增这个配置项
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

修改后重新构建项目并部署，你的路由就会自动带上#，刷新或直接输入website.net/#/about就不会出现404了。

服务器端解决方案（Apache重写规则） #

如果你想保持干净的URL（比如website.net/about），不想用哈希路由，可以通过配置Apache的重写规则，让所有请求都转发到index.html，交给Angular处理路由。

操作步骤： #

1. 先确认Apache已经开启了mod_rewrite模块（大部分主机默认开启，如果没开需要联系主机商或在httpd.conf里启用）。
2. 在网站根目录创建一个.htaccess文件，写入以下规则：

RewriteEngine On
# 如果请求的是真实存在的文件/目录，直接返回
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# 其他所有请求都转发到index.html
RewriteRule ^ /index.html [L]

这个配置的逻辑是：如果用户请求的是实际存在的资源（比如CSS、JS、图片文件），就正常返回；否则把请求转到index.html，让Angular的前端路由来处理跳转。

注意事项： #

• 你的index.html里的<base href="/">要保持正确，确保Angular能正确解析路由。
• 如果网站部署在子目录（比如website.net/my-app/），需要把<base href="/">改成<base href="/my-app/">，同时.htaccess里的最后一行要改成RewriteRule ^ /my-app/index.html [L]。

内容的提问来源于stack exchange，提问作者b-rad15