L is not defined, using leaflet

I am creating an angular application and i want it to display a map using leaflet and angular, however when implementing i am encountering the error:

ReferenceError: L is not defined

the typescript has all of my map implementation

import { AfterViewInit, Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';

import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-moc-report',
  templateUrl: './moc-report.component.html',
  styleUrls: ['./moc-report.component.css'],
})
export class MocReportComponent implements OnInit, AfterViewInit 
{
 
  private map;
  private initMap(): void {
    this.map = L.map('map', {
      center: [10.536421, -61.311951],
      zoom: 8,
    });

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

    tiles.addTo(this.map);
  }


  constructor(
    private router: Router,
    private fb: FormBuilder,
    private http: HttpClient
  ) {
    
  }

  ngAfterViewInit(): void {
    this.initMap();
    this.mapService.getMarkers(this.map);
  }
  

    onMapClick(e) {
    this.L.popup()
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(this.map);
  }

   this.map.on('click', this.onMapClick)

  ngOnInit(): void {
    
  }
}

Im not quite sure what im doing wrong as it is the first time working with leaflet and angular. thank you

>Solution :

You did not import leaflet, try something like:

import * as L from 'leaflet'