Angular Universal预渲染重复生成app-state脚本标签及预渲染注释问题排查求助

从你描述的情况来看，开发环境部分路由出现重复的app-state脚本，生产环境每次都出现，结合你提供的代码和配置，我整理了几个可能的原因和对应的排查、解决步骤：

一、路由被重复预渲染处理 #

你的angular.json中预渲染配置同时指定了routes: ["/"]和routesFile: "routes.txt"，这可能导致某些路由被重复处理：

• 检查routes.txt中的路由列表，是否包含了routes数组里的路由（比如/）？如果是，预渲染工具会对重复的路由执行两次渲染，从而生成两个app-state脚本标签。
• 执行预渲染命令时，观察控制台输出，看是否有路由被多次打印（比如Prerendering route: "/"出现两次）。

解决思路：
移除routes数组配置，只保留routesFile（如果你的所有预渲染路由都在routes.txt里），或者只保留routes数组，删除routesFile配置，避免路由重复处理。

二、异步数据请求的竞态条件或重复调用 #

从你提供的HTML示例来看，第一个app-state是空对象，第二个包含实际数据，这说明服务器端可能执行了两次渲染：第一次渲染时异步请求未完成，生成空状态；第二次请求完成后触发重新渲染，生成带数据的状态。

可能的场景： #

1. 组件中多次调用getVacancy且存在竞态：
   • 比如路由的resolve守卫中调用了getVacancy，同时组件的ngOnInit也调用了一次。如果resolve的异步请求和组件的请求同时发起，可能会出现两次transferState.set（因为第一次set还未完成时，第二次请求的hasKey检查返回false）。
2. 异步操作未被Angular Universal正确等待：
   • 如果组件中调用getVacancy的方式是在订阅回调里（而非直接在ngOnInit中用async/await），Angular Universal可能无法跟踪到后续的异步任务，导致第一次渲染完成后，异步请求才完成并触发重新渲染。

排查步骤：

• 在requestVacancy方法中添加服务器端日志：

  async requestVacancy( uuid: string ): Promise<PublicVacancy> { 
    const stateKey = this.getVacancyStateKey( uuid ); 
    console.log(`[Server] Requesting vacancy for ${uuid}, state exists: ${this.transferState.hasKey(stateKey)}`);
    // ... 原有代码
  }
  

  执行预渲染时查看日志，是否同一个uuid被多次请求且state exists为false。

解决思路：

• 在requestVacancy中先检查状态是否存在，避免重复设置：

  async requestVacancy( uuid: string ): Promise<PublicVacancy> { 
    const stateKey = this.getVacancyStateKey( uuid ); 
    if (this.transferState.hasKey(stateKey)) {
      console.log(`[Server] Using existing state for ${uuid}`);
      return this.transferState.get(stateKey, {} as PublicVacancy);
    }
    const queryString = environment.restApiUrl + '/publicVacancy/' + uuid; 
    const vacancy = await this.http.get<any>( queryString ).toPromise(); 
    this.transferState.set( stateKey, vacancy ); 
    return vacancy; 
  }
  

• 确保组件中的异步操作被Angular Universal跟踪：如果是在订阅中调用getVacancy，改为async/await或返回Promise，比如：

  async ngOnInit() {
    await this.someService.getSomething().toPromise();
    this.vacancy = await this.vacancyService.getVacancy(this.uuid);
  }
  

三、Angular Universal版本或构建配置差异 #

生产环境每次都出现问题，可能和构建配置的差异有关：

1. 检查ci和production配置的差异：你的预渲染用的是browserTarget: "app:build:ci"和serverTarget: "app:server:ci"，对比ci和production配置的angular.json条目，看是否production开启了某些优化（比如aot、buildOptimizer）导致渲染逻辑重复。
2. 检查@nguniversal/builders版本：某些旧版本的Angular Universal预渲染工具存在异步状态处理的bug，导致重复生成app-state脚本。尝试升级到最新稳定版本，看问题是否解决。

四、TransferState的注入或使用问题 #

虽然你说模块导入配置正确，但还是可以再确认：

• 确保BrowserTransferStateModule只在AppModule中导入，ServerTransferStateModule只在AppServerModule中导入，没有在其他懒加载模块中重复导入。
• 检查getVacancyStateKey方法生成的key是否唯一，比如是否存在uuid大小写不一致、拼接错误等情况，导致同一个实际数据被设置不同的key，从而多次写入状态。

临时验证方案 #

如果以上排查都没找到问题，可以尝试修改预渲染配置，添加renderTimeout选项，确保预渲染等待足够长的时间完成所有异步操作：

"prerender": { 
  "builder": "@nguniversal/builders:prerender", 
  "options": { 
    "browserTarget": "app:build:ci", 
    "serverTarget": "app:server:ci", 
    "routesFile": "routes.txt",
    "renderTimeout": 10000 // 增加超时时间，单位毫秒
  }, 
  "configurations": { 
    "production": {} 
  } 
},

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