部署Angular站点至Apache2后导航链接无法正常工作

核心原因 #

Angular是单页应用（SPA），客户端路由需要由Angular自身处理，但部署到服务器后，服务器会把路由路径当成静态文件请求，找不到就返回404，导致链接失效。

解决方案 #

方案1：启用哈希路由（最简单） #

修改app-routing.module.ts的路由配置，添加useHash: true，让路由带上#，服务器就不会解析路径，直接交给Angular处理：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
// 导入你的组件

const routes: Routes = [
  // 你的路由配置示例
  { path: 'landing', component: LandingComponent },
  { path: 'academicadvising', component: AcademicAdvisingComponent },
  // ...其他路由
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })], // 此处添加useHash配置
  exports: [RouterModule]
})
export class AppRoutingModule { }

重新执行ng build构建项目后部署，导航链接即可正常工作。

方案2：配置服务器重写规则（无哈希路由） #

如果不想用哈希模式，需要让服务器把所有非静态文件的请求转发到index.html：

Apache2配置

1. 在dist文件夹根目录创建.htaccess文件，写入以下内容：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

2. 启用Apache的rewrite模块并重启服务：

sudo a2enmod rewrite
sudo systemctl restart apache2

重新部署dist文件夹内容即可。

http-server配置

启动http-server时添加-P参数，将404请求转发到index.html：

http-server dist/你的项目名 -P http://localhost:8080?

额外检查 #

确认app-routing.module.ts里的路由路径和routerLink的值完全匹配，比如routerLink="academicadvising"对应路由配置中的path: 'academicadvising'，大小写也要保持一致。

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