Angular SSR模式下外部URL重定向报错的解决方案咨询

当然有办法解决这个问题！Angular SSR模式下报错是因为服务器端（Node.js环境）不存在浏览器特有的window对象，直接访问自然会抛出ReferenceError。下面是几种靠谱的解决方案：

Angular提供了PLATFORM_ID令牌和isPlatformBrowser工具函数，用来检测当前代码是运行在浏览器还是服务器端。这样我们可以只在浏览器环境下访问window：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  redirectToExternalUrl(url: string) {
    if (isPlatformBrowser(this.platformId)) {
      window.location.href = url;
    } else {
      // 服务器端可以做一些日志记录或者其他处理，比如302重定向
      // 如果是Angular Universal，也可以通过响应对象设置重定向
      console.log(`Server-side redirect to ${url}`);
    }
  }
}

Angular提供了DOCUMENT注入令牌，它会在浏览器环境返回真实的document对象，在SSR环境返回一个模拟的document对象，这样我们可以通过document.location.href来实现跳转，避免直接依赖window：

import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  constructor(@Inject(DOCUMENT) private document: Document) {}

  redirectToExternalUrl(url: string) {
    this.document.location.href = url;
  }
}

注意：在SSR环境下，这种方式的服务器端不会实际触发跳转，但浏览器端会正常工作。如果需要服务器端也返回302重定向响应，还是要结合平台判断和服务器端的响应处理逻辑。

把外部跳转逻辑封装成一个独立服务，这样所有组件都能复用，也更便于维护和单元测试：

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

@Injectable({
  providedIn: 'root'
})
export class ExternalNavigationService {
  constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
    @Inject(DOCUMENT) private document: Document
  ) {}

  navigate(url: string) {
    if (isPlatformBrowser(this.platformId)) {
      this.document.location.href = url;
    } else {
      // 服务器端自定义处理，比如在Angular Universal中修改响应头
      // 若使用Nest.js作为服务器，可在此操作response对象实现重定向
      console.log(`Server-side redirect requested to ${url}`);
    }
  }
}

在组件中注入并使用：

import { Component } from '@angular/core';
import { ExternalNavigationService } from './external-navigation.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  constructor(private navService: ExternalNavigationService) {}

  handleRedirect() {
    this.navService.navigate('https://example.com');
  }
}

这些方案的核心思路都是通过Angular提供的环境抽象层，避免在服务器端直接访问浏览器专属的全局对象，既保证浏览器端正常跳转，又能彻底消除SSR时的报错。

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