Question

是否可以在有角度/通用的情况下使用Leaflet？如何避免在服务器中构建Leaflet？

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

var requestFn = window.requestAnimationFrame || getPrefixed（'RequestAnimationFrame'）|| timeoutDefer;窗户不是定义。

Answer 1

我通过用Mock Browser模拟window，navigator和document来解决此问题

只需安装模拟浏览器pacakge npm i mock-browser

并将以下代码添加到您的server.ts：

const MockBrowser = require('mock-browser').mocks.MockBrowser;
const mock = new MockBrowser();


global['window'] = mock.getWindow();
global['document'] = mock.getDocument();
global['navigator'] = mock.getNavigator();

Answer 2

根据您遇到的错误，您应该添加平台浏览器，以检查是否要从服务器呈现应用程序，因为服务器上没有窗口，文档等关键字。因此添加这样的支票-

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

export class XYZ implements OnInit{
    constructor(@Inject(PLATFORM_ID) private platform: any) { }
    ngOnInit() {
        if (isPlatformBrowser(this.platform)) {
            // use window, document keywords here
        }
    }
}

Answer 3

经过数小时的搜索，我找到了解决方案。您需要将Leaflet与自定义服务一起使用。

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');
    }
  }

}

map.component.ts

constructor (
    private leafletService: LeafletService
) {}

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

在GitHub

上也有一个示例

如何在Leaflet中使用@ angular / universal？

3 个答案: