Angular运行npm run dev:ssr报127.0.0.1:6379连接拒绝错误

1. 端口6379是Redis默认服务端口，报错connect ECONNREFUSED 127.0.0.1:6379是因为本地没有启动Redis服务。你代码里引用的cacheResponse、cachedResponse两个SSR缓存中间件默认依赖Redis存储渲染缓存，服务端渲染流程走到缓存逻辑时连不上Redis，就会抛出未捕获的Promise异常，导致请求一直挂起，页面始终处于加载状态无法返回内容。
2. ngAfterViewInit中拿不到指定HTML元素有两个原因：
   • SSR运行在Node环境，靠domino模拟的DOM环境不完整，服务端执行生命周期钩子时根本不存在真实渲染完成的DOM树，自然拿不到目标元素
   • 前面Redis连接失败导致SSR渲染流程直接中断，客户端侧的水合流程也没法正常完成，进一步导致DOM挂载异常。

• 解决Redis连接导致的页面加载失败问题，二选一即可：
  • 本地安装并启动Redis服务，保持默认监听127.0.0.1:6379，启动后重新执行npm run dev:ssr即可消除连接报错
  • 本地开发环境直接跳过缓存逻辑：修改路由判断逻辑，开发环境下不要给路由挂载cachedResponse、cacheResponse中间件，避免触发Redis连接
• 修复DOM元素获取失败问题：
  所有涉及DOM操作、滚动定位、浏览器特有API调用的逻辑，必须做平台环境隔离，只在浏览器端执行。用Angular内置的isPlatformBrowser方法判断运行环境，示例代码如下：

  import { AfterViewInit, Component, Inject, PLATFORM_ID } from '@angular/core';
  import { isPlatformBrowser } from '@angular/common';
  
  @Component({
    selector: 'app-demo',
    templateUrl: './demo.component.html'
  })
  export class DemoComponent implements AfterViewInit {
    constructor(@Inject(PLATFORM_ID) private platformId: object) {}
  
    ngAfterViewInit(): void {
      // 非浏览器环境直接跳过DOM操作
      if (!isPlatformBrowser(this.platformId)) return;
  
      // 等浏览器端水合完成、DOM挂载后再执行逻辑
      setTimeout(() => {
        const target = document.getElementById('target-element-id');
        target?.scrollIntoView({ behavior: 'smooth' });
      }, 0);
    }
  }
  

  如果使用Angular 16及以上版本，也可以直接用afterNextRender钩子，该钩子只会在浏览器端执行，能自动保证逻辑运行时DOM已经完成挂载。

当前server.ts中用domino模拟全局window、document对象的写法没有问题，但注意不要在服务端侧直接调用浏览器专属的BOM/DOM API，所有这类逻辑都要加平台判断，否则很容易在SSR阶段抛出异常打断渲染流程。

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