Leaflet-FreehandShapes Not Working in Angular 17 Production Build

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 &copy; 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