Leaflet map doesn't render, missing some parts

After rendering leaflet component in my angular app some map-images are missing, here is my code

import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { DOCUMENT } from '@angular/common';



@Component({
selector: 'app-leaflet-offline-maps',
standalone: true,
imports: [],
templateUrl: './leaflet-offline-maps.component.html',
styleUrls: ['./leaflet-offline-maps.component.css']
})
export class LeafletOfflineMapsComponent {
private isBrowser: boolean;

constructor(
@Inject(PLATFORM_ID) private platformId: Object,
@Inject(DOCUMENT) private document: Document
) {
this.isBrowser = isPlatformBrowser(platformId);
}

async ngOnInit(): Promise<void> {
if (this.isBrowser) {
const L = await import('leaflet');

const map = L.map('map').setView([42.4304, 19.2594], 13);

L.tileLayer('http://localhost:8080/tile/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
}
}
}


and

<div id="map"></div>





also I already installed leaflet and import leaflet css style in angular.json

Continue reading...