Angular - Location not found

[taopen4]

I did play with error 'Location not found' when integrated with angular 11 in both version 2.9.9 and 2.9.8.
How can I integrated with angular?

/// <reference types='leaflet-loading' />
/// <reference types='leaflet-draw' />
import {Component, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output} from '@angular/core';
import {Control, DomUtil, DrawEvents, FeatureGroup, featureGroup, icon, LoadingOptions, Map, MapOptions, ZoomAnimEvent} from 'leaflet';
import 'leaflet-routing-machine';
import 'leaflet-search';
import {DomSanitizer} from '@angular/platform-browser';

declare module 'leaflet' {
  interface Control {
    _addTo(map: Map): Control;
  }

  interface Map {
    _leaflet_id: number;
    _container: HTMLElement;
  }
}

declare let L;

@Component({
  selector: 'app-osm-map',
  templateUrl: './osm-map.component.html',
  styleUrls: ['./osm-map.component.css']
})
export class OsmMapComponent implements OnInit, OnDestroy {
  @Output() map$: EventEmitter<Map> = new EventEmitter();
  @Output() zoom$: EventEmitter<number> = new EventEmitter();
  @Input() options: MapOptions;
  @Input() layerControl: {};
  public map: Map;
  private zoom: number;
  public loadingOptions: LoadingOptions = {
    position: 'topleft',
  };
  drawOptions: {};
  drawLocal: {};
  drawnItems: FeatureGroup = featureGroup();
  jsonDownload: string;

  constructor(private sanitizer: DomSanitizer) {
  }

  ngOnInit(): void {
    // Use a compact attribution control for small map container widths
    if (!Control.Attribution.prototype._addTo) {
      Control.Attribution.prototype._addTo = Control.Attribution.prototype.addTo;

      Control.Attribution.prototype.addTo = function(map) {
        Control.Attribution.prototype._addTo.call(this, map);

        // use the css checkbox hack to toggle the attribution
        const parent = this._container.parentNode;
        const checkbox = document.createElement('input');
        const label = document.createElement('label');
        const checkboxId = 'attribution-toggle-' + map._leaflet_id;  // unique name if multiple maps are present

        checkbox.setAttribute('id', checkboxId);
        checkbox.setAttribute('type', 'checkbox');
        checkbox.classList.add('leaflet-compact-attribution-toggle');
        parent.insertBefore(checkbox, parent.firstChild);

        label.setAttribute('for', checkboxId);
        label.classList.add('leaflet-control');
        label.classList.add('leaflet-compact-attribution-label');
        parent.appendChild(label);

        // initial setup for map load
        if (map._container.offsetWidth <= 600) {
          DomUtil.addClass(this._container, 'leaflet-compact-attribution');
        }

        // update on map resize
        map.on('resize', function() {
          if (map._container.offsetWidth > 600) {
            DomUtil.removeClass(this._container, 'leaflet-compact-attribution');
          } else {
            DomUtil.addClass(this._container, 'leaflet-compact-attribution');
          }
        }, this);
        return this;
      };
      this.drawOptions = {
        position: 'topleft',
        draw: {
          marker: {
            icon: icon({
              iconSize: [25, 41],
              iconAnchor: [13, 41],
              iconUrl: 'https://unpkg.com/[email protected]/dist/images/marker-icon.png',
              shadowUrl: 'https://unpkg.com/[email protected]/dist/images/marker-shadow.png'
            })
          }
        },
        edit: {
          featureGroup: this.drawnItems
        }
      };
      this.drawLocal = {
        draw: {
          toolbar: {
            buttons: {
              polygon: 'Draw an awesome polygon!'
            }
          }
        }
      };
    }
  }

  onMapReady(map: Map) {
    this.map = map;
    this.map$.emit(map);
    this.zoom = map.getZoom();
    this.zoom$.emit(this.zoom);
    L.Routing.control({
      waypoints: [L.latLng(21.028511, 105.804817), L.latLng(21.028511, 100.804817)],
      routeWhileDragging: true,
    }).addTo(map);

    new L.Control.Search({
      url: 'http://nominatim.openstreetmap.org/search?format=json&q={s}',
      jsonpParam: 'json_callback',
      propertyName: 'display_name',
      propertyLoc: ['lat', 'lon'],
      marker: L.circleMarker([0, 0], {radius: 30}),
      autoCollapse: true,
      autoType: false,
      minLength: 2
    }).addTo(map);
  }

  onMapZoomEnd(e: ZoomAnimEvent) {
    this.zoom = e.target.getZoom();
    this.zoom$.emit(this.zoom);
  }

  ngOnDestroy(): void {
    this.map.clearAllEventListeners();
    this.map.remove();
  }

  public onDrawCreated(e: any) {
    // tslint:disable-next-line:no-console
    console.log('Draw Created Event!');

    const layer = (e as DrawEvents.Created).layer;
    this.drawnItems.addLayer(layer);

    const type = e.layerType;

    if (type !== 'marker') {
      layer.bindPopup(`<a class="download_geo">Download GEO</a>`);
      layer.addEventListener('click', () => {
        const geojson = layer.toGeoJSON();
        this.jsonDownload = JSON.stringify(geojson);
      });
    }
  }

  public onDrawStart(e: any) {
    // tslint:disable-next-line:no-console
    console.log('Draw Started Event!');
  }

  @HostListener('document:click', ['$event'])
  downloadGeo(event) {
    if (event.target.classList.contains('download_geo')) {
      const a = document.createElement('a');
      const blob = new Blob([this.jsonDownload], {type: 'application/octet-stream'});
      const url = URL.createObjectURL(blob);
      a.href = url;
      a.download = 'geo.json';
      a.click();
      URL.revokeObjectURL(url);
    }
  }
}

Please help me! Thank you so much!