Angular 10 SSR集成后window未定义：常量文件如何用isPlatformBrowser？

这个问题太典型了——SSR在服务器端渲染时，全局的window对象根本不存在，而你的mi.values.ts在模块加载阶段就直接访问了window，所以服务器端编译时必然报错。虽然isPlatformBrowser是正确的方向，但常量文件没法直接注入Angular的依赖（比如PLATFORM_ID），所以得调整一下代码结构，把依赖window的逻辑改成延迟初始化或者通过服务/工厂注入的方式，下面给你两种可行的方案：

方案一：封装成Angular服务（推荐） #

把原来的常量逻辑封装成一个可注入的服务，利用服务的构造函数来判断当前平台，这样就能安全地访问window了：

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

@Injectable({ providedIn: 'root' })
export class AnalyticsConfigService {
  private _window: any;
  private cid_global: any;

  // 原来的常量属性改成服务的实例属性
  z_application: string;
  z_host: string;
  z_country: string;
  z_language: string;
  contrastPreference: any;
  z_converged = 'BW';
  z_env: string;
  lastPageTitle = 'unknown';

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    // 仅在浏览器环境下才获取window对象
    this._window = isPlatformBrowser(this.platformId) ? window : {};
    // 初始化cid_global，兼容没有该属性的情况
    this.cid_global = this._window['cid_global'] || {
      brand: 'unknown',
      locale: { country: '', language: '' },
      ENV: ''
    };

    // 计算各个属性值
    this.z_application = this.cid_global.accessPath ? this.cid_global.accessPath.slice(1, -1) : undefined;
    this.z_host = this.cid_global['brand'].toUpperCase();
    this.z_country = this.cid_global.locale.country;
    this.z_language = this.cid_global.locale.language;
    this.contrastPreference = this.cid_global.contrastPreference;
    this.z_env = this.cid_global.ENV;
  }

  // 把analyticsDefinitions改成getter，确保每次访问都是最新值
  get analyticsDefinitions() {
    return {
      'onclick': {
        'dl': 'userevent',
        'z_event': 'clicked',
        'z_application': this.z_application,
        'z_host': this.z_host,
        'z_country': this.z_country,
        'z_language': this.z_language,
        'z_converged': this.z_converged,
        'z_env': this.z_env,
        'z_client_id': maskClientId(getCidConfigParams('clientId')),
        'z_referer': getCidConfigParams('source'),
        'z_redir': getCidConfigParams('redirectUri'),
        'z_login': 0
      },
      // 其他事件定义可以在这里继续添加
    };
  }
}

使用方式： #

在需要用到analyticsDefinitions的组件或服务中，注入这个服务即可：

import { Component } from '@angular/core';
import { AnalyticsConfigService } from './path/to/analytics-config.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  constructor(private analyticsConfig: AnalyticsConfigService) {
    // 访问 analyticsDefinitions
    console.log(this.analyticsConfig.analyticsDefinitions.onclick);
  }
}

方案二：用工厂提供者保留"常量"风格 #

如果你更想保留类似常量的使用方式，可以通过Angular的InjectionToken和工厂函数来实现，这样不用改成服务，依然可以通过注入来获取：

1. 定义令牌和工厂函数 #

创建一个文件（比如analytics-definitions.ts）：

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

// 定义一个注入令牌
export const ANALYTICS_DEFINITIONS = new InjectionToken<any>('ANALYTICS_DEFINITIONS');

// 工厂函数：负责创建并返回analyticsDefinitions
export function analyticsDefinitionsFactory(platformId: Object) {
  const _window = isPlatformBrowser(platformId) ? window : {};
  const cid_global = _window['cid_global'] || {
    brand: 'unknown',
    locale: { country: '', language: '' },
    ENV: ''
  };

  const z_application = cid_global.accessPath ? cid_global.accessPath.slice(1, -1) : undefined;
  const z_host = cid_global['brand'].toUpperCase();
  const z_country = cid_global.locale.country;
  const z_language = cid_global.locale.language;
  const contrastPreference = cid_global.contrastPreference;
  const z_converged = 'BW';
  const z_env = cid_global.ENV;
  let lastPageTitle = 'unknown';

  return {
    'onclick': {
      'dl': 'userevent',
      'z_event': 'clicked',
      'z_application': z_application,
      'z_host': z_host,
      'z_country': z_country,
      'z_language': z_language,
      'z_converged': z_converged,
      'z_env': z_env,
      'z_client_id': maskClientId(getCidConfigParams('clientId')),
      'z_referer': getCidConfigParams('source'),
      'z_redir': getCidConfigParams('redirectUri'),
      'z_login': 0
    },
    // 其他事件定义...
  };
}

2. 在AppModule中配置提供者 #

import { NgModule } from '@angular/core';
import { ANALYTICS_DEFINITIONS, analyticsDefinitionsFactory } from './path/to/analytics-definitions';
import { PLATFORM_ID } from '@angular/common';

@NgModule({
  providers: [
    {
      provide: ANALYTICS_DEFINITIONS,
      useFactory: analyticsDefinitionsFactory,
      deps: [PLATFORM_ID] // 注入PLATFORM_ID供工厂函数使用
    }
  ]
})
export class AppModule {}

使用方式： #

在需要的地方通过@Inject注入令牌：

import { Component, Inject } from '@angular/core';
import { ANALYTICS_DEFINITIONS } from './path/to/analytics-definitions';

@Component({...})
export class YourComponent {
  constructor(@Inject(ANALYTICS_DEFINITIONS) private analyticsDefinitions: any) {
    console.log(this.analyticsDefinitions.onclick);
  }
}

注意事项 #

• 如果maskClientId或getCidConfigParams这两个函数也依赖window，同样需要把它们的逻辑调整到服务或工厂函数中，确保只在浏览器环境下执行。
• 服务器端渲染时，这些值会使用默认的unknown等占位符，到浏览器端会自动替换成真实的cid_global值，不会影响功能。

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