marker is not visible on leaflet map

As i followed the same step by step to create leaflet map now map is visible but marker is not visible on map. below is the code snippet:- please let me know how to resolve the below issue:-

ERROR TypeError: Cannot read property 'addLayer' of undefined
    at NewClass.addTo (vendor.js:156997)
    at main.js:15357
    at Array.forEach (<anonymous>)
    at SafeSubscriber._next (main.js:15353)
    at SafeSubscriber.__tryOrUnsub (vendor.js:209959)
    at SafeSubscriber.next (vendor.js:209898)
    at Subscriber._next (vendor.js:209848)
    at Subscriber.next (vendor.js:209825)
    at CatchSubscriber._next (vendor.js:209848)
    at CatchSubscriber.next (vendor.js:209825)

map.component.ts

import { Component, AfterViewInit, OnInit } from '@angular/core';

import * as L from 'leaflet';
import { icon, Marker } from 'leaflet';
import { MarkerService } from 'src/app/core/e-commerce/_services/marker.service';

@Component({
  selector: 'kt-google-map',
  templateUrl: './google-map.component.html',
  styleUrls: ['./google-map.component.scss']
})
export class GoogleMapComponent implements OnInit, AfterViewInit {
  public map: any;
  public lonlat: any;
  public showMap: boolean = false;
  constructor(
    private markerService: MarkerService,
  ) {
  }

  ngOnInit(): void {
  }
  
  ngAfterViewInit(): void {
    this.markerService.makeCapitalMarkers(this.map);
    this.showMap = this.markerService.showMap;
    if(this.showMap == true){
      this.initMap();
    }
  }

  private initMap(): void {
    this.map = L.map('map', {
      center: [39.8282, -98.5795],
      zoom: 3
    });
    const iconRetinaUrl = 'assets/marker-icon-2x.png';
    const iconUrl = 'assets/marker-icon.png';
    const shadowUrl = 'assets/marker-shadow.png';
    const iconDefault = L.icon({
      iconRetinaUrl,
      iconUrl,
      shadowUrl,
      iconSize: [25, 41],
      iconAnchor: [12, 41],
      popupAnchor: [1, -34],
      tooltipAnchor: [16, -28],
      shadowSize: [41, 41]
    });
    L.Marker.prototype.options.icon = iconDefault;

    const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    });

    tiles.addTo(this.map);
  }
}

map.component.html

<div class="map-container">
    <div class="map-frame">
        <div id="map" *ngIf="showMap"></div>
    </div>
</div>

marker.service.ts

// Angular
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as L from 'leaflet';
import { AuthService } from '../../auth/_services/auth.service';
const BASE_URL = 'http://10.131.198.12/api';

@Injectable({
  providedIn: 'root'
})

export class MarkerService {
  // capitals: string = './assets/data/usa-capitals.geojson';
  capitals: string = '../../../../assets/data/usa-capitals.geojson';
  public showMap: boolean = false;

  constructor(private http: HttpClient,
    private marker: AuthService
  ) {
  }

  makeCapitalMarkers(map: L.map): void {
    this.marker.getAllRoutesLocation()
      .subscribe((res) => {
        const mapMarker = res;
        mapMarker.forEach(s1 => {
          const coordinates = s1.location.split(',');
          const lat = coordinates[0];
          const lon = coordinates[1];
          const marker = L.marker([lon, lat]).addTo(map);
        })
        this.showMap = true;
      })
  }
} 

// getAllRoutesLocation method form api service
public getAllRoutesLocation() {
    return barData = this.http.get(`${API_URL}/route/allLocation`);   
  }