Angular SSR下router-outlet无法渲染懒加载页面HTML问题咨询

1. 修正路由初始导航配置 #

Angular 11+版本中initialNavigation: 'enabled'已废弃，SSR场景下必须使用*enabledBlocking*，保证根模块初始化前完成懒加载模块的加载，避免提前渲染导致内容为空。
修正app/app-routing.module.ts代码：

import { PagesRoutingModule } from './pages/pages.routing';  
@NgModule({
  declarations: [],
  imports: [
    RouterModule.forRoot(routes, {
      initialNavigation: 'enabledBlocking' // 替换原有enabled配置
    }),
    PagesRoutingModule
  ],
  exports: [ RouterModule ]
})

export class AppRoutingModule { }

2. 补全懒加载模块的组件声明 #

你提供的child-routes.module.ts未声明路由用到的HomeComponent和NewsComponent，SSR下严格的模块隔离会导致组件找不到、渲染中断，需要补全声明：
修正app/pages/child-routes.module.ts代码：

import { HomeComponent } from './home/home.component';
import { NewsComponent } from './news/news.component';

const childRoutes: Routes = [
  { path: '', component: HomeComponent},
  { path: 'news', component: NewsComponent}
]

@NgModule({
  declarations: [HomeComponent, NewsComponent], // 新增组件声明
  imports: [RouterModule.forChild(childRoutes)],
  exports: [RouterModule]
})
export class ChildRoutesModule { }

3. 适配服务端环境的浏览器API调用 #

如果懒加载的组件中直接调用了window、document等仅浏览器存在的API，会导致服务端渲染报错终止，需要用平台判断包裹客户端专属逻辑：
组件内示例代码：

import { PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

export class HomeComponent {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  ngOnInit() {
    // 仅在客户端执行浏览器相关逻辑
    if (isPlatformBrowser(this.platformId)) {
      window.scrollTo(0, 0);
    }
  }
}

4. 验证配置 #

修改完成后执行SSR开发命令（通常为npm run dev:ssr），查看服务端控制台是否有报错，访问页面后右键查看网页源代码，确认<main>标签内已包含懒加载组件的HTML内容即可。

内容的提问来源于stack exchange，提问作者Ricardo Castañeda