Angular Universal集成ngx-leaflet报错：navigator is not defined

这个问题太典型了——Leaflet依赖浏览器环境独有的navigator对象，但Node.js服务器端根本没有这个API，所以SSR渲染时直接抛出错误。下面给你几个靠谱的解决方案，按推荐程度排序：

方案一：用Angular平台判断，仅在浏览器端处理地图 #

这是最稳妥的做法，核心思路就是让服务器端完全跳过地图相关的渲染和初始化逻辑，把这部分工作全交给浏览器。

步骤1：在组件中注入平台标识 #

在你的地图组件里，导入Angular的平台判断工具，先确认当前环境是不是浏览器：

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

@Component({
  selector: 'app-map',
  template: `
    <!-- 只有在浏览器环境才渲染地图容器 -->
    <div *ngIf="isBrowser" 
         leaflet 
         [leafletOptions]="mapOptions" 
         style="height: 400px;"></div>
  `
})
export class MapComponent implements OnInit {
  isBrowser: boolean;
  mapOptions: MapOptions;

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

  ngOnInit(): void {
    // 仅在浏览器端初始化地图配置
    if (this.isBrowser) {
      this.mapOptions = {
        zoom: 13,
        center: [51.505, -0.09],
        layers: [
          // 这里添加你的图层配置，比如OpenStreetMap
          // L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
        ]
      };
    }
  }
}

步骤2：动态导入Leaflet（可选） #

如果你的项目开启了Tree Shaking，还可以把Leaflet的导入放在浏览器判断逻辑里，避免服务器端打包不必要的代码：

ngOnInit(): void {
  if (this.isBrowser) {
    // 动态导入Leaflet，只在浏览器端加载
    import('leaflet').then(L => {
      this.mapOptions = {
        zoom: 13,
        center: [51.505, -0.09],
        layers: [
          L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
          })
        ]
      };
    });
  }
}

方案二：给Node环境Mock navigator对象 #

这个方案更简单，但有潜在风险（Leaflet可能还依赖其他浏览器API），适合快速验证：

在你的server.ts文件最开头，添加这段代码，给Node的全局对象模拟一个navigator：

// 放在所有Angular相关导入之前
(global as any).navigator = {
  userAgent: 'node.js'
};

这样服务器端渲染时，Leaflet访问navigator就不会报错了，但如果后续Leaflet用到navigator的其他属性，可能还要补充对应的Mock。

方案三：动态加载地图组件 #

如果你的地图组件逻辑复杂，可以把它做成独立组件，只在浏览器端动态加载：

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

@Component({
  selector: 'app-root',
  template: `<div #mapHost></div>`
})
export class AppComponent {
  @ViewChild('mapHost', { read: ViewContainerRef }) mapHost: ViewContainerRef;

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

  ngAfterViewInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      // 动态导入地图组件，服务器端不会加载这段代码
      import('./map/map.component').then(({ MapComponent }) => {
        const factory = this.resolver.resolveComponentFactory(MapComponent);
        this.mapHost.createComponent(factory);
      });
    }
  }
}

额外注意事项 #

• 确保leaflet.css仅在浏览器端加载：在angular.json的styles数组里添加node_modules/leaflet/dist/leaflet.css即可，服务器端渲染不会处理CSS。
• 不要在服务器模块（app.server.module.ts）中导入ngx-leaflet相关模块，避免服务器端加载不必要的依赖。

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