Angular 4 Universal集成后出现"window is not defined"错误求助

这个错误的核心原因很明确：Angular Universal在服务端(Node.js环境)运行时，没有浏览器环境中的window全局对象，而你项目中依赖的ngx-carousel组件底层使用了hammerjs，这个库在初始化时直接尝试访问window，导致服务端渲染过程抛出ReferenceError。

从你的错误栈也能看出来：hammerjs的源码在node_modules/hammerjs/hammer.js:2643行直接调用了window，而这个库是被ngx-carousel引入的。

下面是几种可行的解决方案，按推荐程度排序：

方案一：通过PLATFORM_ID区分环境，仅在浏览器渲染carousel #

这是最规范的解决方式，利用Angular提供的工具类判断当前运行环境，只在浏览器中加载依赖window的组件和逻辑。

1. 在使用ngx-carousel的组件中，注入PLATFORM_ID和isPlatformBrowser工具函数：

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

2. 在组件类中标记当前环境是否为浏览器，并在模板和逻辑中做条件判断：

export class YourCarouselComponent implements OnInit {
  isBrowser: boolean;

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    // 判断是否处于浏览器环境
    this.isBrowser = isPlatformBrowser(platformId);
  }

  ngOnInit() {
    if (this.isBrowser) {
      // 这里放置需要依赖window的carousel初始化逻辑，比如配置项设置
    }
  }
}

3. 在组件模板中，用*ngIf控制carousel仅在浏览器环境渲染：

<ngx-carousel *ngIf="isBrowser">
  <!-- 你的carousel内容 -->
</ngx-carousel>

这样服务端渲染时会跳过carousel的加载，避免触发hammerjs的window访问逻辑。

方案二：在服务端模拟window对象（临时应急方案） #

如果你需要快速临时解决问题，可以在server.ts中为Node.js环境模拟空的window和document对象，但这种方法可能引发其他潜在问题（比如hammerjs需要更多浏览器API支持），仅推荐作为临时过渡：

在server.ts的最顶部添加以下代码：

// 为服务端环境模拟window和document对象
(global as any).window = {};
(global as any).document = { createElement: () => ({}) };

方案三：替换为支持服务端渲染的轮播组件 #

如果长期来看，你可以考虑替换ngx-carousel为原生支持Angular Universal的轮播组件，比如：

• Angular Material的MatCarousel
• ng-bootstrap的NgbCarousel
  这些组件在设计时就考虑了服务端渲染的兼容性，不会依赖浏览器专属的全局对象。

额外建议 #

检查你的package.json，ngx-carousel的版本是1.3.5，属于比较旧的版本，你可以尝试升级到最新版本，看看官方是否已经修复了Universal兼容问题（不过旧版本的组件可能停止维护，升级需要测试兼容性）。

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