Ошибка ngx-leaflet 5 угловых карт при использовании производственной сборки

Я довольно новичок в Angular и создал свое первое угловое приложение с плагином листовки. Все работает, как ожидалось, до использования производственной сборки:

ng s --target=productionили жеng build --target=production

Контейнер листовки с картой отображает не все листы карты и / или в неправильной строке столбца. Я попытался перерисовать карту с помощью map.invalidateSize(); в onMapReady(..), но безуспешно.

(leafletMapReady)="onMapReady($event)

Сам компонент отображается в зависимости от условия *ngIf:

<div>
    <app-tracking-map *ngIf="deliveryState == 1" [trackingData]="trackingData"></app-tracking-map>
</div>

На самом деле, я понятия не имею, с чего начать расследование, просто думаю, что это связано с веб-пакетом и волшебной связкой.

в angular-cli.json я добавил листовку css

      "styles": [
    "styles.css",
    "../node_modules/leaflet/dist/leaflet.css"
  ],
Источник

1 ответ

Решение

Скорее всего, вам не хватает файла leaflet.css, расположенного в ./node_modules/leaflet/dist/leaflet.css, Когда этого не хватает, карта и плитки нарисованы, но они не выложены правильно.

То, как вы ссылаетесь на файл в вашей сборке Webpack, зависит от того, как настроен ваш проект. Файл README ngx-leaflet описывает некоторые из наиболее распространенных конфигураций:

https://github.com/Asymmetrik/ngx-leaflet

Источник
Другие вопросы по тегам