I’ve been working with the leaflet-freehandshapes npm package by bozdoz in an Angular 17 project. Everything works as expected in development mode when I use ng serve. However, I encounter issues when switching to production mode.
- Angular 17
- Leaflet
- leaflet-freehandshapes npm package
The code:
import * as L from 'leaflet';
import 'leaflet-freehandshapes';
import { AfterViewInit, Component } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
imports: [],
styleUrl: './app.component.scss',
template: '<div id="map" style="height: 400px;"></div>',
})
export class AppComponent implements AfterViewInit {
ngAfterViewInit(): void {
const map = L.map('map', {
center: [51.505, -0.09],
zoom: 13,
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors',
}).addTo(map);
const freeHandShapes = new L.FreeHandShapes({
polygon: {
color: 'red'
}
}).addTo(map);
freeHandShapes.setMode('add');
}
}
Steps to Reproduce:
- Run ng build to build the project for production.
- Serve the production build using serve -s dist/browser/my-project.
Error:
Please let me know if you have some tips
Thanks