Angular Universal预渲染仅首页正常其余路由无法渲染问题求助

解决方案 #

1. 修正base href配置
   <base href="/">是整个应用的基础路径，仅当应用部署在域名子目录下时才需要调整，你将其改为/gdp后，只有/gdp路径下的静态资源能被正确加载，其余路由自然无法正常渲染，请先改回默认值<base href="/">。

2. 修复Angular 11预渲染bug
   你使用的Angular 11.2.9版本存在已知预渲染缺陷：当多个不同路径的路由指向同一个组件时，除第一个匹配的路由外，其余路由预渲染时会跳过组件内容渲染，你所有二级路由都复用了ComparisonsComponent，刚好符合该缺陷的触发条件。
   可选择以下任意一种方案解决：

• 升级Angular及Angular Universal到12及以上版本，该问题已在后续版本修复
• 暂时无法升级的话，可将路由改为带参数的形式区分不同场景，修改路由配置如下：

const routes: Routes = [
  {
    path: 'comparison/:type',
    component: ComparisonsComponent,
  },
  {
    path: '',
    component: HomeComponent,
    pathMatch: 'full'
  },
];

对应修改angular.json中prerender配置的routes为带参数的路径即可。

3. 兼容服务端运行环境
   如果调整后问题仍然存在，检查ComparisonsComponent内部逻辑，是否直接调用了window、document、localStorage等仅浏览器环境存在的API，预渲染运行在服务端时没有这些API，会导致组件渲染中断，最终呈现router-outlet下内容为空的情况。
   可按以下方式兼容：

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

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

  ngOnInit() {
    // 仅在浏览器环境下执行浏览器专属逻辑
    if (isPlatformBrowser(this.platformId)) {
      // 原调用浏览器API的代码放在此处
    }
  }
}

4. 优化路由匹配规则
   给首页路由加上pathMatch: 'full'，避免空路径路由被优先匹配，干扰其他路由的正常识别。

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