如何将@angular/universal与Leaflet一起使用？

Question

是否可以将 Leaflet 与 Angular/Universal 一起使用？如何避免在服务器内构建Leaflet？

npm run build:prod生成dist文件夹后。但是当我运行时node server.js出现以下错误：

var requestFn = window.requestAnimationFrame || getPrefixed('RequestAnimationFrame') || 超时延迟；窗口未定义。

Answer 1

经过几个小时的搜索，我找到了解决方案。您需要使用具有定制服务的Leaflet。

传单.service.ts

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

@Injectable()
export class LeafletService {

  public L = null;

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    if (isPlatformBrowser(platformId)) {
      this.L = require('leaflet');
    }
  }

}

地图组件.ts

constructor (
    private leafletService: LeafletService
) {}

ngAfterViewInit() {
    ...
    this.leafletService.L.map('map').setView([51.505, -0.09], 13);
    ...
}

GitHub上也有一个例子