Angular 14部署至Vercel后app-root为空，组件无法加载求助

1. 先确认本地构建是否正常 #

• 本地执行构建命令：ng build --configuration production（Angular 14替代--prod的标准命令）
• 用静态服务器（比如npx serve dist/你的项目名）打开本地构建产物，检查组件是否能正常渲染。如果本地也空，问题出在项目本身，和Vercel无关。
• 检查dist文件夹内的文件完整性：确认存在main.*.js、polyfills.*.js、styles.*.css等核心文件，路径无异常。

2. 修正Vercel部署配置 #

vercel.json 重定向规则 #

单页应用必须配置HTML5路由重写，确保所有请求都指向index.html，替换为以下配置：

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

不要用dist文件夹内的重定向文件，Vercel优先读取vercel.json的配置。

部署命令与输出目录 #

在Vercel项目的Build & Development Settings中确认：

• Build Command：ng build --configuration production
• Output Directory：填写angular.json中projects.你的项目名.architect.build.options.outputPath的值（通常是dist/你的项目名）

3. 排查浏览器控制台报错 #

打开浏览器F12开发者工具，重点看两个标签：

• Console：
  • 若有404错误（找不到js/css）：检查angular.json的baseHref配置。根域名部署设为"/"，子路径部署设为"/你的项目路径/"（比如Vercel预览地址的子路径）。
  • 若有JS运行时错误：检查package.json依赖是否完整，部署时是否遗漏peer依赖（可尝试本地删除node_modules后重新npm install再构建，确认依赖无问题）。
• Network：查看所有资源的加载状态，确认核心JS/CSS文件返回200状态码。

4. 检查路由与组件配置 #

路由配置（app-routing.module.ts） #

确保存在默认路由指向实际组件，比如：

const routes: Routes = [
  { path: '', component: HomeComponent }, // 必须有默认路由，否则无内容渲染
  { path: '**', redirectTo: '' } // 可选，处理404路由
];

@NgModule({
  imports: [RouterModule.forRoot(routes)], // 无需额外配置useHash，Vercel支持HTML5路由
  exports: [RouterModule]
})
export class AppRoutingModule { }

AppComponent与模块配置 #

• 确认app.component.html有实际内容，无*ngIf等条件渲染导致内容被隐藏。
• 检查app.module.ts：确保导入BrowserModule、AppRoutingModule，declarations数组包含AppComponent，bootstrap数组指定AppComponent。

5. 关键文件核对 #

• angular.json：确认architect.build.options.outputPath、baseHref、assets配置正确，无路径拼写错误。
• 项目结构：src/app目录下核心文件（app.component.ts、app.module.ts、app-routing.module.ts）存在且路径正确，无大小写错误（Vercel服务器区分文件名大小写）。

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