Why map leaflet js crashed?

Question

I used map leaflet in angular, before this i used map in other component dont have any problem. but at other component, i got problem, the map crashed/broken, every image from the map is not compatible

my code:

import * as Leaflet from 'leaflet';
mapTraceability: Leaflet.Map;
mapWorldImage =
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
optionsMapTraceability = {
    layers: [Leaflet.tileLayer(this.mapWorldImage)],
    zoom: 10,
    center: { lat: 3.1319, lng: 101.6841 },
  };

mapClicked($event: any) {
    console.log($event.latlng.lat, $event.latlng.lng);
  }

onMapTraceabilityReady($event: Leaflet.Map) {
    this.mapTraceability = $event;
    this.mapTraceability.addEventListener('dragend', () =>
        console.log('dragend', this.mapTraceability.getCenter())
    );
    this.mapTraceability.addEventListener('zoomend', () =>
        console.log('zoomend', this.mapTraceability.getCenter())
    );
  }

<div style="height: max-content;" leaflet [leafletOptions]="optionsMapTraceability"
(leafletMapReady)="onMapTraceabilityReady($event)" (leafletClick)="mapClicked($event)">
</div>