ngx-leaflet angular 5 проблема с тайлами карты при использовании производственной сборки

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

ng s --target=production or 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"
  ],

angular leaflet ngx-leaflet
person TSD    schedule 15.02.2018    source источник
comment
Похоже, отсутствует файл CSS Leaflet. См. stackoverflow.com/questions/48579677/   -  person ghybs    schedule 15.02.2018
comment
Как сказал @ghybs, вероятно, отсутствует файл leaflet.css. В листовке ngx README рассказывается о различных способах включения файла css в зависимости от вашей системы сборки: github.com/Asymmetrik/ngx-leaflet#import-the-leaflet-stylesheet   -  person reblace    schedule 15.02.2018

Ответы (1)


arrow_upward
2
arrow_downward

Вероятно, вам не хватает файла leaflet.css, расположенного в ./node_modules/leaflet/dist/leaflet.css. Когда этого нет, карта и плитки отрисовываются, но не размещаются должным образом.

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

https://github.com/Asymmetrik/ngx-leaflet#import-the-leaflet-stylesheet

person reblace    schedule 15.02.2018
comment
спасибо @reblace указал мне правильное направление. Сначала забыл упомянуть, что у меня была ссылка на листок css в angular-cli.json - см. Отредактированный вопрос. Наконец, и это решило мою проблему, на данный момент я добавил leaflet.css в src / style.css @import "~leaflet/dist/leaflet.css";, не уверен, что это правильное место. В листовке ngx README говорится о файле vendor.ts при использовании webpack, но у меня нет такого файла в текущем проекте angular 5. еще раз спасибо! - person TSD; 16.02.2018
comment
Не уверен, видели ли вы это: asymmetrik.com/ngx-leaflet -tutorial-angular-cli Это руководство, которое проведет вас через то, как Leaflet работает с ng-cli, и есть репозиторий GitHub с рабочим примером. Показывает, как правильно настроить CSS и прочее. - person reblace; 18.02.2018
comment
Стоит отметить, что angular.json (где вы добавляете путь стиля) не находится в режиме просмотра с ng serve. Чтобы увидеть изменения, вам нужно запустить ng serve еще раз. - person Walter Luszczyk; 13.04.2020