Угловое 2 листовка плитки огромные зазоры

Question

Используя ту же конфигурацию, за пределами моих угловых 2 приложения, листовки нагрузок мелких, но это то, что происходит в угловых 2:

Если переместить карту, другую нагрузку плитки, но то же самое проблема сохраняется.

HTML:

<div class="leaflet-maps" id="map"></div> 

компонент:

let el = this._elementRef.nativeElement.querySelector('.leaflet-maps'); 

    let map = L.map("map", { 
     zoomControl: false, 
     center: L.latLng(37.8, -96), 
     zoom: 5, 
     minZoom: 4, 
     maxZoom: 19 
    }); 

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
    }).addTo(map); 

Я загрузил файл CSS листовка через:

styleUrls: ['./maps.component.scss'] 

Где я вставил содержимое листовки css

/* required styles */ 

.leaflet-pane, 
.leaflet-tile, 
.leaflet-marker-icon, 
.leaflet-marker-shadow, 
.leaflet-tile-container, 

.... 

Answer 1

Это фиксированная моя проблема:

import { Component, ViewEncapsulation} from '@angular/core'; 

@Component({ 
    selector: 'maps', 
    templateUrl: 'maps.component.html', 
    styleUrls: ['./maps.component.scss'], 
    encapsulation: ViewEncapsulation.None // <-- 
})