Leaflet Map with Angular 19 not shown

I tried to update my application from ng18 to 19, but now my Map isn't shown anymore despite all elements being in the DOM tree.

I'm using leaflet 1.9.4 with @types/leaflet 1.9.15.

Both .js and .css are set in angular.json. Without the .css included I can see the tiles appearing out of place and my markers floating in the air, but as soon as I add .css in angular.json, nothing (including the map markers) is displayed anymore. I can verify that .css is also loaded correctly as part of my styles.scss.

I can also reproduce the same issue with this different setup:

index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test19</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

</head>
<body>
<app-root></app-root>
</body>
</html>


app.component.ts:

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import * as Leaflet from 'leaflet';
@Component({
selector: 'app-root',
template: `<div #map class="map"></div>`,
styleUrl: './app.component.scss'
})
export class AppComponent implements AfterViewInit {
@ViewChild('map') public mapDiv!: ElementRef<HTMLDivElement>;

public ngAfterViewInit(): void {
const l = Leaflet.map(this.mapDiv.nativeElement, { center: [0, 0], zoom: 1 });
const t = Leaflet.tileLayer('http://localhost:8081/worldmap/tile/{z}/{x}/{y}', { maxZoom: 6, minZoom: 1, noWrap: true });
tiles.addTo(l);
}
}


am I missing something or does the angular 19 update break leaflet?

Is there any known fix or workaround?

if my Browser plays a role here: Firefox 130.0

Continue reading...