Angular v17 SSR集成ngx-leaflet报错：ReferenceError: window is not defined

问题定位 #

这个报错是因为ngx-leaflet依赖的Leaflet核心库在服务器端渲染阶段尝试访问浏览器专属的window对象导致的。可以通过以下方式精准定位：

• 查看报错的完整调用栈，找到触发window访问的具体代码位置，通常会指向leaflet.js内部逻辑或ngx-leaflet的初始化流程
• 在服务器入口文件（如main.server.ts）中临时添加日志，追踪模块加载顺序，确认哪个模块加载时触发了该错误

修复方案 #

1. 基于浏览器环境条件渲染组件 #

利用Angular的isPlatformBrowser判断当前环境，仅在客户端渲染Leaflet相关组件：

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

@Component({
  template: `<div *ngIf="isBrowser" leaflet [leafletOptions]="mapOptions"></div>`
})
export class MapComponent {
  isBrowser: boolean;
  mapOptions = {
    center: [51.505, -0.09],
    zoom: 13
  };

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    this.isBrowser = isPlatformBrowser(platformId);
  }
}

2. 配置SSR排除外部依赖 #

在angular.json的server构建配置中，将Leaflet和ngx-leaflet标记为外部依赖，让服务器端跳过这些库的加载：

"server": {
  "builder": "@angular-devkit/build-angular:server",
  "options": {
    "outputPath": "dist/your-app/server",
    "main": "src/main.server.ts",
    "tsConfig": "src/tsconfig.server.json",
    "externalDependencies": ["leaflet", "@asymmetrik/ngx-leaflet"]
  }
}

3. 动态导入Leaflet模块 #

在组件中仅在浏览器环境下动态导入Leaflet相关依赖，避免服务器端加载：

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

@Component({
  template: `<div #mapContainer></div>`
})
export class MapComponent implements OnInit {
  @ViewChild('mapContainer') mapContainer!: ElementRef;

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  async ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      const L = await import('leaflet');
      // 手动初始化地图
      const map = L.map(this.mapContainer.nativeElement).setView([51.505, -0.09], 13);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
    }
  }
}

4. 临时模拟window对象（不推荐） #

如果以上方法无法快速生效，可在服务器入口文件main.server.ts中添加全局window模拟作为临时方案：

(global as any).window = {
  innerWidth: 1920,
  innerHeight: 1080,
  navigator: { userAgent: 'server-side-rendering' }
  // 根据Leaflet运行需求补充必要属性
};

注意：此方法可能引发其他兼容性问题，仅作为应急手段使用

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