SSR及Angular Universal下resolver运行逻辑与加载器显示方案咨询

核心问题解答 #

首先明确：Angular SSR 服务端不可能在 resolver 执行完成前完成页面渲染。
Angular 的路由 resolver 设计逻辑就是阻塞路由组件渲染：不管是客户端渲染还是服务端渲染，路由匹配到对应路径后，必须等待所有关联 resolver 的异步逻辑执行完毕、拿到全部解析数据后，才会初始化路由组件、进入渲染流程。
你遇到的加载器一闪的问题本质是：resolver 的整个执行过程都发生在服务端侧，这段时间客户端还在等待服务端返回完整的HTML响应，页面始终是空白状态。等服务端把带加载器的HTML返回给浏览器时，resolver 已经执行完毕，所以加载器刚渲染出来就会触发隐藏逻辑，仅出现一瞬。

注意：Preboot 库的PrebootComplete事件触发时机为客户端应用完成初始化、服务端渲染状态和客户端状态完全同步之后，本身就晚于 resolver 执行完成时间，用该事件控制首屏加载器必然会出现闪烁问题，建议首屏加载器不要绑定该事件。

可行解决方案 #

• 方案1：将加载器改为 index.html 中的静态内容，脱离 Angular 生命周期控制
  直接在项目的index.html模板中写入静态全局加载器，默认显示，不需要依赖 Preboot 事件控制，等客户端路由首次加载完成后再手动移除加载器：

  <!-- index.html 示例 -->
  <body>
    <!-- 静态加载器，浏览器收到HTML后会立即渲染 -->
    <div id="ssr-loader" style="position: fixed; inset: 0; background: #fff; display: flex; align-items: center; justify-content: center; z-index: 99999;">
      页面加载中，请稍候...
    </div>
    <app-root></app-root>
  </body>
  

  在应用根组件中监听路由首屏加载完成事件，移除加载器：

  // app.component.ts 示例
  import { Component, OnInit } from '@angular/core';
  import { NavigationEnd, Router } from '@angular/router';
  import { filter } from 'rxjs';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
  })
  export class AppComponent implements OnInit {
    constructor(private router: Router) {}
  
    ngOnInit() {
      this.router.events.pipe(
        filter(event => event instanceof NavigationEnd)
      ).subscribe(() => {
        const loader = document.getElementById('ssr-loader');
        if (loader) loader.remove();
      });
    }
  }
  

• 方案2：将非必要的阻塞逻辑从 resolver 迁移到组件内执行
  resolver 仅适合存放执行速度极快的权限校验、轻量数据拉取逻辑。如果 resolver 内包含慢接口请求，建议将这部分逻辑迁移到对应路由组件的ngOnInit中执行，服务端无需等待慢请求即可返回带加载器的页面框架，客户端再异步拉取数据，加载器可以正常显示在数据请求的全周期。
• 方案3：开启 SSR 流式渲染，提前返回静态内容
  如果必须保留 resolver 逻辑，可以开启 Angular Universal 的流式渲染能力，服务端不需要等 resolver 执行完成、整页渲染完毕再返回响应，会先把HTML头部和静态加载器内容推给浏览器，用户可以在 resolver 执行的等待期直接看到加载器，不会出现空白页。server.ts参考配置如下：

  // server.ts 流式渲染配置示例
  import { renderApplication } from '@angular/platform-server';
  import { AppServerModule } from './src/main.server';
  
  server.get('*', (req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
    const htmlStream = renderApplication(AppServerModule, {
      document: '<!DOCTYPE html><html lang="zh-CN">...你的index.html模板内容...</html>',
      url: req.url,
      stream: true // 开启流式输出
    });
    htmlStream.pipe(res);
  });
  

内容的提问来源于stack exchange，提问作者Achraf El Khamsi