Angular v17 SSR应用部署Vercel路由问题求助

1. 修正Angular路由配置 #

你只有LaunchList一个组件，别用redirectTo处理根路径——这种方式在SSR初始化阶段容易出问题，直接把根路径''绑定到组件就行，同时保留原launchList路径：

独立应用（Angular v17默认） #

在main.ts的provideRouter里这么写：

import { provideRouter, Routes } from '@angular/router';
import { LaunchListComponent } from './launch-list/launch-list.component';

const routes: Routes = [
  { path: '', component: LaunchListComponent }, // 根路径直接渲染组件
  { path: 'launchList', component: LaunchListComponent }, // 保留原访问路径
  { path: '**', redirectTo: '' } // 兜底重定向到根路径
];

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideClientHydration() // 必须加这个确保水合生效
  ]
});

模块式应用（从旧版迁移的） #

在app-routing.module.ts里配置：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LaunchListComponent } from './launch-list/launch-list.component';

const routes: Routes = [
  { path: '', component: LaunchListComponent },
  { path: 'launchList', component: LaunchListComponent },
  { path: '**', redirectTo: '' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { initialNavigation: 'enabledBlocking' })], // 强制SSR完成路由解析再渲染
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 修正Vercel部署配置 #

Vercel的路由规则必须确保所有请求（包括根路径）都转发到Angular的SSR服务端入口。在项目根目录新建vercel.json：

{
  "buildCommand": "ng build",
  "outputDirectory": "dist/[你的项目名]/browser", // 替换成你编译后的browser目录路径
  "framework": "angular",
  "functions": {
    "dist/[你的项目名]/server/**/*.js": {
      "runtime": "@vercel/node@3"
    }
  },
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/dist/[你的项目名]/server/main.js" // 替换成SSR服务端入口文件路径，v17独立项目可能是server.mjs
    }
  ]
}

3. 验证修复效果 #

部署后访问根路径，查看页面源码：

• 能看到LaunchList组件的完整HTML标记，说明SSR生效
• 网络面板不会出现JSON请求，因为数据已经在服务端渲染完成

关键提醒 #

• 别用redirectTo处理根路径，直接绑定组件能避免SSR初始化时的路由跳转延迟
• 必须确保SSR相关配置（provideClientHydration或BrowserModule.withServerTransition）已正确添加
• Vercel的routes规则要覆盖所有路径，确保根路径请求也能进入SSR流程

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