MEAN栈下Angular自定义404页面在Express中无法生效的解决方法

这个问题我之前做MEAN栈项目时也碰到过，核心原因是Express没把未知请求交给Angular的路由系统去处理。下面是具体的解决步骤：

1. 先确认Angular的路由配置正确 #

首先要保证你的Angular路由模块（app-routing.module.ts）里，通配符路由是最后一个定义的——因为Angular路由是按顺序匹配的，只有前面的路由都不匹配时，才会触发这个404路由：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  // 把所有业务路由都放在这里
  { path: '**', component: PageNotFoundComponent } // 通配符路由必须放在最后
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 修改Express的server.js配置 #

关键要调整Express的请求处理顺序：先处理API接口，再托管静态资源，最后把所有未匹配的请求转发给Angular的index.html，让Angular路由接管。

调整后的server.js结构如下：

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

// 第一步：先处理API路由（如果你的项目有后端接口）
// 示例：app.use('/api', require('./routes/userRoutes'));

// 第二步：托管Angular编译后的dist静态资源
// 注意替换成你实际的dist目录路径，比如dist/your-angular-project-name
app.use(express.static(path.join(__dirname, 'dist/your-angular-app')));

// 第三步：所有未匹配的请求，返回Angular的index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/your-angular-app/index.html'));
});

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

3. 几个关键注意事项 #

• 路由顺序绝对不能乱：API路由必须放在静态资源和通配符路由之前，否则API请求会被转发到Angular的index.html，导致接口直接失效。
• 彻底移除Express的404中间件：原来的404中间件会在Angular接管之前就返回404响应，直接阻断了Angular路由的处理逻辑，一定要删掉。
• 确认dist路径正确：运行ng build后，Angular会把编译文件放在dist/项目名目录下，确保server.js里的路径和这个完全一致。

原理说明 #

当用户访问一个不存在的URL时，Express会按顺序检查：

1. 是否是已定义的API路由 → 如果是，正常处理接口请求；
2. 是否是dist目录下的静态资源（比如js、css、图片） → 如果是，返回对应资源；
3. 如果都不匹配，就返回Angular的index.html → Angular应用加载后，路由系统会匹配到最后的通配符路由，从而显示你的自定义404页面。

这样配置后，既不会影响正常的Angular路由和API接口，又能让自定义404页面完美生效。

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