如何在NestJS中配置类似Express的通配符默认路由？

这个问题我之前帮好几个开发者解决过，本质上就是SPA前端路由和服务器路由的冲突问题——Angular的前端路由在浏览器刷新时会被当成真实的服务器路径请求，而服务器上并没有对应的资源，所以必须让NestJS对所有未匹配的路由返回index.html，让Angular接管后续的路由处理。下面是具体的实现步骤：

1. 先托管Angular的静态资源 #

首先需要让NestJS能正确提供Angular构建后的静态文件（比如index.html、JS/CSS资源），这一步用@nestjs/serve-static模块来实现：

安装依赖（如果还没装） #

npm install @nestjs/serve-static

在AppModule中配置静态资源托管 #

修改src/app.module.ts，引入ServeStaticModule并配置Angular构建产物的路径：

import { Module } from '@nestjs/common';
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';
import { AppController } from './app.controller';
import { AppService } from './app.service';

@Module({
  imports: [
    ServeStaticModule.forRoot({
      // 替换成你的Angular项目构建后的目录，比如dist/my-angular-app
      rootPath: join(__dirname, '..', 'dist', 'your-angular-app-name'),
      // 排除API前缀的路由，避免API请求被静态资源模块拦截
      exclude: ['/api*'],
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

这里的exclude: ['/api*']很重要：如果你的NestJS后端有API接口（比如/api/users），要把这些路由排除在外，否则API请求也会返回index.html，导致接口无法正常工作。

2. 处理所有未匹配的路由，返回index.html #

接下来用NestJS的@All装饰器，在控制器中定义一个全局的路由处理方法，捕获所有未被API或静态资源匹配的请求，返回Angular的index.html：

修改src/app.controller.ts：

import { Controller, All, Res } from '@nestjs/common';
import { Response } from 'express';
import { join } from 'path';

@Controller()
export class AppController {
  // 这里可以保留你的其他API路由，比如@Get('/api/health')之类的

  @All('*')
  handleSPA(@Res() res: Response) {
    // 同样要注意路径的正确性，和上面配置的rootPath对应
    res.sendFile(join(__dirname, '..', 'dist', 'your-angular-app-name', 'index.html'));
  }
}

原理说明 #

• 当用户访问首页或通过Angular路由跳转到/products时，请求会被Angular的前端路由处理，不会发送到服务器。
• 当用户刷新/products页面时，浏览器会直接向服务器发起GET /products请求，此时NestJS的路由系统找不到对应的API路由，就会触发@All('*')的方法，返回index.html。Angular加载完成后，会根据当前URL的路径渲染对应的懒加载模块，恢复正常的页面状态。

注意事项 #

• 确保Angular项目已经执行了构建命令（比如ng build），生成了dist目录下的静态文件。
• 调整join方法中的路径参数，匹配你实际的项目结构（比如如果NestJS和Angular是同目录下的两个子项目，路径可能需要调整为join(__dirname, '..', '..', 'dist', 'your-angular-app-name')）。

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