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/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/[email protected]/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