Почему в Angular6 не работает Leaflet?

Question

[Павел]

Создаю новый пустой проект, подключаю leaflet и ошибок нет, но и работает криво.

import { Component, OnInit } from '@angular/core';
import * as L from 'leaflet';

@Component({
  selector: 'app-root',
  template: '<div id="map" style="width:1440px;height:800px;"></div>',
  styleUrls: ['../../node_modules/leaflet/dist/leaflet.css']
})
export class AppComponent {
  ngOnInit() {
    const map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {}).addTo(map);
  }
}

Вот что получается:

Comments

[Moskus]

А вы стили leaflet положить, куда надо, не забыли, случайно?
Потому что тайлы грузятся откуда надо (ваше стартовое положение - в Лондоне), только показываются с глюками.

[Павел]

Moskus, да, тут пути верные. Если указать неверный путь это видно будет. Пробовал даже разные версии leaflet, но без толку.
Здесь тайлы некоторые на другие поверх накладываются, поэтому есть пустые области. Так тайлы все загружаются и без ошибок.

[Moskus]

milast, смотрите в инспекторе стили для тайлов - нет ли конфликта с чем-либо.

[Павел]

Moskus, действительно, похоже, что дело в стилях и в том, что Angular их преобразует при подключении через директиву (styleUrls : [])
Добавил css в angular.json и стало всё отображаться корректно!

"styles": [
    "src/styles.css",
    "node_modules/leaflet/dist/leaflet.css"
],

Спасибо за наводку, поскольку думал дело в некой совместимости!

[Moskus]

milast, пожалуйста.
Я никогда не использовал Angular и не знаю, что он делает, но глюк вполне выглядел специфичным для конфликта со стилями или скриптами. Далее - рассуждал по мере вероятности первого или второго.