Использование угловых 7 универсальных с Openlayers 5 - PullRequest
Новая
       17

Использование угловых 7 универсальных с Openlayers 5

1 голос
/ 12 марта 2019

У меня есть угловое приложение 7.2, использующее открытые слои 5.3.Я пытаюсь настроить angular universal для этого приложения, но когда я запускаю универсальный сервер (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 для макета этих переменных, но он просто завершился с ошибкой из-за элемента canvas 

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)

Есть предложения?

Ответы [ 3 ]

1 голос
/ 13 марта 2019

Попробуйте использовать последнюю версию Openlayer "ol": "^ 5.3.1",

1 голос
/ 12 марта 2019

Вот как я контролирую 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>
0 голосов
/ 13 марта 2019

Ошибка была вызвана библиотекой pixelworks, которая является зависимостью от OL 5.

Эта библиотека создает экземпляр canvas и пытается получить из него 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

...