Angular Universal懒加载模块下SSR未渲染HTTP响应数据如何解决？

问题根因 #

• 你提供的路由配置存在语法错误：同一个父路由配置了两个children属性，后定义的会覆盖前者，如果你直接用这段配置测试，懒加载路由根本不会被命中。测试时需要将不用的children配置注释删除，保证同一层级只有一个children数组。
• SSR 默认会在页面所有同步任务执行完成后就返回渲染结果，懒加载模块本身是异步加载的，如果你没有配置让SSR等待异步HTTP请求完成的逻辑，服务端会在请求返回前就完成页面渲染，导致数据部分为空。

修复方案 #

1. 先修正路由配置 #

测试懒加载场景时，路由配置修改为如下结构：

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'dane',
        loadChildren: () => import('./dane/dane.module').then(m => m.DaneModule)
      }
    ]
  }
]

同时确保懒加载的DaneModule的子路由配置正确，指向DaneComponent。

2. 使用路由Resolver预取数据 #

Resolver 会在路由激活前执行数据获取逻辑，SSR 会主动等待Resolver的异步任务完成后再渲染页面，完美适配懒加载场景。

第一步：创建Resolver

// dane.resolver.ts
import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { first, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DaneResolver implements Resolve<any> {
  constructor(private http: HttpClient) {}

  resolve(): Observable<any> {
    return this.http.get('http://localhost:3000/posts').pipe(first());
  }
}

第二步：配置到懒加载模块的路由

在DaneModule的路由配置中关联Resolver：

// dane.module.ts 里的路由配置
const daneRoutes: Routes = [
  {
    path: '',
    component: DaneComponent,
    resolve: {
      pageData: DaneResolver
    }
  }
];

第三步：组件内直接取Resolver返回的数据

// dane.component.ts 调整逻辑
import { ActivatedRoute } from '@angular/router';

export class DaneComponent implements OnInit {
  el: any = { hero_image: '' };

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // 直接从路由快照拿预加载的数据，不用再发请求
    this.el = this.route.snapshot.data['pageData'];
  }
}

3. 开启HTTP缓存传输（可选，避免客户端二次请求） #

如果你使用 Angular 16+，直接在根模块的 providers 里添加如下配置即可自动处理服务端和客户端的HTTP请求缓存，避免重复请求：

// app.config.ts 或者 app.module.ts 的providers
providers: [
  provideClientHydration(withHttpTransferCache())
]

如果是低版本Angular，可以手动用TransferState存储服务端请求返回的数据，客户端直接读取即可。

4. 额外检查项 #

• 确保根模块已经导入HttpClientModule，不要在懒加载子模块重复导入
• 服务端渲染的入口模块（通常是app.server.module.ts）已经正确导入ServerModule和相关SSR依赖
• HTTP请求的地址在服务端环境可以正常访问，不要出现跨域或者连接拒绝问题

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