在 Openlayers 5 中使用 angular 7 Universal

Question

我有一个使用开放层 5.3 的 angular 7.2 应用程序。 我正在尝试为此应用程序设置 angular 通用，但是当我运行通用服务器（ node dist/server.js ）时，由于未定义仅客户端变量（例如window ），我遇到了一些错误。

webpack:///./node_modules/ol/has.js?:54
var DEVICE_PIXEL_RATIO = window.devicePixelRatio || 1;
                     ^
ReferenceError: window is not defined

我尝试使用 domino 来模拟这些变量，但由于画布元素，它只是因另一个错误而失败

Error: NotYetImplemented
   at HTMLCanvasElement.exports.nyi (/my/project/dist/server.js)

所有 OL 代码都被导入并在单个MapComponent组件中使用。 我的导入在这个组件中看起来像这样：

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';

我的主要问题是提到的错误会在我运行通用服务器后立即发生，因此即使在尝试在浏览器中访问通用呈现的网站之前也是如此。

因此，当应用程序运行客户端时，使用这样的方法仅实例化MapComponent是行不通的，因为崩溃发生在此之前

<app-map *ngIf="isBrowser"></app-map>

其中isBrowser变量在组件中初始化为isPlatformmBrowser(platformId)的值

有什么建议？

Answer 1

这就是我在我的应用程序中控制 SSR 的方式，

我的组件方面，

    import { isPlatformBrowser } from '@angular/common';
    import * as JQuery from "jquery";


    constructor(
    @Inject(PLATFORM_ID) public platformId){...}      

    ngOnInit() {
      if (isPlatformBrowser(this.platformId)){
       var $: any = jQuery; //for example, load jQuery if you are sure about platform is browser
      }
     }

例如，当 ssr 不是浏览器时，我正在显示加载栏。

我的模板方面，

<ssr-loading *ngIf="platformId != 'browser'"></ssr-loading>

Answer 2

尝试使用 Openlayer 最新版本 "ol": "^5.3.1",

Answer 3

我遇到的错误是由pixelworks库引起的，它是 OL 5 的依赖项。

该库实例化一个画布并尝试从中获取 2d 上下文，这是domino不支持的

var context = document.createElement('canvas').getContext('2d');

上下文不会立即使用，而是在它始终被实例化的地方创建。

由于我不想在服务器端执行代码时使用OL，所以我的解决方案是在构建过程中修改server.js文件以删除此实例化。

sed -i "s/var context = document.createElement('canvas').getContext('2d');/var context = null;/" dist/server.js

注意： domino还是需要的，因为OL导出的模块也会尝试访问全局变量，比如window

Answer 4

添加到 server.ts

const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs.readFileSync(path.join(__dirname, '.', 'dist', 'index.html')).toString();
const win = domino.createWindow(template);
const files = fs.readdirSync(`${process.cwd()}/dist-server`);
// const styleFiles = files.filter(file => file.startsWith('styles'));
// const hashStyle = styleFiles[0].split('.')[1];
// const style = fs.readFileSync(path.join(__dirname, '.', 'dist-server', `styles.${hashStyle}.bundle.css`)).toString();

global['window'] = win;
Object.defineProperty(win.document.body.style, 'transform', {
  value: () => {
    return {
      enumerable: true,
      configurable: true
    };
  },
});
global['document'] = win.document;
global['CSS'] = null;
// global['XMLHttpRequest'] = require('xmlhttprequest').XMLHttpRequest;
global['Prism'] = null;