Angular项目添加SSR后缺失app.config.server.ts问题求助

为什么没生成app.config.server.ts？ #

主要有这几个核心原因：

• Angular版本差异：app.config.server.ts是Angular 16及以后版本才会生成的文件，对应独立组件/基于配置的启动模式。如果你的示例项目是Angular 15或更早版本，ng add @angular/ssr会生成app.server.module.ts而非app.config.server.ts——这是旧版本NgModule架构下的标准SSR配置文件，属于正常情况。

• 项目架构不匹配：如果示例项目是基于传统NgModule的结构（存在app.module.ts），而非独立组件模式（用app.config.ts启动应用），ng add @angular/ssr会自动适配旧架构，不会生成app.config.server.ts。

• 命令执行异常：执行ng add @angular/ssr时可能出现了静默错误（比如依赖冲突、权限不足），导致部分配置文件未生成。可以重新执行命令，仔细查看终端输出的报错信息，针对性解决后再重试。

页面仅显示app-root的解决思路 #

这个现象通常是SSR渲染失败或客户端水合（hydration）未完成导致的，可按以下步骤排查：

1. 检查终端和浏览器控制台的报错信息：比如是否有服务端不支持的API（如window、document），这类代码需要用isPlatformBrowser等工具做环境判断，避免在服务端执行。

2. 根据项目架构调整配置：

   • 若为Angular 16+独立组件架构但缺少文件，可手动创建app.config.server.ts：

     import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
     import { provideServerRendering } from '@angular/platform-server';
     import { appConfig } from './app.config';
     
     const serverConfig: ApplicationConfig = {
       providers: [provideServerRendering()]
     };
     
     export const config = mergeApplicationConfig(appConfig, serverConfig);
     

     接着修改main.server.ts，导入上述配置启动应用：

     import { bootstrapApplication } from '@angular/platform-browser';
     import { AppComponent } from './app/app.component';
     import { config } from './app/app.config.server';
     
     bootstrapApplication(AppComponent, config)
       .catch(err => console.error(err));
     

   • 若为旧版本NgModule架构，确保app.server.module.ts正确导入了AppModule并配置了ServerModule，同时检查server.ts的启动逻辑是否正常。

3. 重新启动SSR服务：运行npm run dev:ssr，确认服务端和客户端都正常启动。

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