Angular路由失效问题排查（MEAN架构）

嘿，我之前也踩过一模一样的坑！Angular是单页应用（SPA），它的路由是前端层面的——也就是说，当你直接在地址栏输入路由路径或者刷新页面时，Node服务器根本不知道这个路径对应的文件，所以会返回Cannot GET /xxx错误。既然你已经排除了index.html和Angular路由代码的问题，那问题肯定出在server.js没有配置SPA fallback机制，也就是让所有非API的请求都重定向到index.html，交给Angular自己处理路由。

下面给你具体的修复方案：

1. Express服务器的正确配置 #

如果你的server.js用的是Express框架，修改成这样：

const express = require('express');
const path = require('path');
const app = express();

// 托管Angular打包后的静态资源
// 注意：替换成你实际的打包目录，Angular CLI默认打包后是dist/你的项目名
// Angular 14+版本打包后路径是dist/你的项目名/browser
const distPath = path.join(__dirname, 'dist/your-app-name/browser');
app.use(express.static(distPath));

// 关键：所有非API的请求都返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(distPath, 'index.html'));
});

// 启动服务器
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

2. 关键注意事项 #

• 先打包应用：确保你已经运行过ng build（生产环境用ng build --prod），服务器托管的是打包后的静态文件，不是Angular源码。
• 路径要正确：根据你的Angular版本调整distPath，比如Angular 13及以下的打包目录是dist/你的项目名，14+是dist/你的项目名/browser。
• 重启服务器：修改server.js后一定要重启Node服务器，配置才会生效。

3. 备选方案（Hash路由） #

如果你暂时不想修改服务器配置，也可以切换到Angular的Hash路由模式，这样URL会带#，比如http://localhost:3000/#/your-route，服务器就不会拦截这些路由请求了。修改app-routing.module.ts：

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

const routes: Routes = [
  // 你的路由配置
];

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

不过这个方案只是临时妥协，生产环境更推荐用服务器配置fallback的方式，URL更美观规范。

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