Leaflet Map in Angular - Markers in wrong position [duplicate]

Question

I'm trying to add a custom map into an Angular app.

What works: The markers are displayed, the longitude seems to be roughly right.

What doesn't work: For some reason the markers are misplaced below the map by an offset of about 5000 units (not px!)

For my map (imageOverlay) I set the bounds to be [[0,0][5000,3900]] (1 Unit = 1.34px, image size [lat,long]: [6700px, 5226px])

I set four markers to each of the corners and to the center by using

L.marker(bounds.getCenter(), {icon: myIcon}).addTo(map).bindPopup('Center');
L.marker(bounds.getNorthEast(), {icon: myIcon}).addTo(map).bindPopup('NorthEast');
L.marker(bounds.getSouthWest(), {icon: myIcon}).addTo(map).bindPopup('SouthWest');
L.marker(bounds.getNorthWest(), {icon: myIcon}).addTo(map).bindPopup('NorthWest');
L.marker(bounds.getSouthEast(), {icon: myIcon}).addTo(map).bindPopup('SouthEast');

bounds.get(...) returns the right coordinates when logged to console (e.g. bounds.getNorthEast() returns [5000, 3900])

But instead the Markers are positioned below the map with an offset that seems to be the bounds value of 5000 units.

However outside of Angular everything seems to be working fine as can be seen in this Fiddle

I have absolutely no clue what could be causing the offset and I'm out of ideas what to try next...

My setup in Angular:

ngAfterViewInit(): void {

  var map = L.map('map', {
    crs: L.CRS.Simple,
    minZoom: -4
  });

  var bounds = new L.LatLngBounds([0, 0], [5000, 3900]);

  console.log("Center: " + bounds.getCenter()); //logs: Center: LatLng(2500, 1950)
  console.log("NE: " + bounds.getNorthEast()); //logs: NE: LatLng(5000, 3900)
  console.log("SW: " + bounds.getSouthWest()); //logs: SW: LatLng(0, 0)


  var image = L.imageOverlay('../../assets/KorvosaMap_5226x6700.png', [
    [0, 0],
    [5000, 3900]
  ]);

  //Marker

  var myIcon = L.icon({
    iconUrl: '../../assets/MapMarker.svg',
    iconSize: [34, 47]
  })


  //add to map
  L.marker(bounds.getCenter(), {
    icon: myIcon
  }).addTo(map).bindPopup('Center');
  L.marker(bounds.getNorthEast(), {
    icon: myIcon
  }).addTo(map).bindPopup('NorthEast');
  L.marker(bounds.getSouthWest(), {
    icon: myIcon
  }).addTo(map).bindPopup('SouthWest');
  L.marker(bounds.getNorthWest(), {
    icon: myIcon
  }).addTo(map).bindPopup('NorthWest');
  L.marker(bounds.getSouthEast(), {
    icon: myIcon
  }).addTo(map).bindPopup('SouthEast');

  L.marker([2500, 1950], {
    icon: myIcon
  }).addTo(map);


  image.addTo(map)

  map.setView([2500, 1500], -2);

  map.on('click', function(event: L.LeafletMouseEvent) {
    var coord = event.latlng;
    console.log(coord);
  });

}

#map {
  overflow: hidden;
  height: 90vh;
}

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