Map container not found using leaflet.js and angular

I am trying to develop a map using leaflet in angular, however the map is black and the console is saying

map container not found

my html is simple:

<mat-tab label="Facility">
                <br/>
                <h3>Facility Name: {{daformfacs.facilityName}}</h3>
                <mat-divider></mat-divider>
                <br/>
                <h3>Facility's Operational Status: {{daformfacs.facStatus}}</h3>
                <mat-divider></mat-divider>
                <br/>
                <h3>Number of Operational Equipment in the Facility: {{daformfacs.operEqu}}</h3>
                <mat-divider></mat-divider>
                <br/>
                <h3>Number of Inoperable Equipment in the Facility: {{daformfacs.inoperEqu}}</h3>
                <mat-divider></mat-divider>
                <br/>
                <h3>Damage Done to the Facility's Infrastructure: {{daformfacs.facilityDamage}}</h3>
                <mat-divider></mat-divider>
                <br/>
                <h3>Location:<br/></h3>
                <mat-card class="mapContainerClass">
                <div class="map-container">
                  <div class="map-frame">
                    <div id="map"></div>
                  </div>
                </div>
              </mat-card>
                <mat-divider></mat-divider>
                <br/>
                <h3>Images:<br/>
                    <img class="styleImage" src="http://localhost:3000/{{ daformfacs.facImage }}" />
                </h3>
              </mat-tab>

and is styled as such, css:

.map-container {
  width: 1000px;
  height: 500px;
  padding: 1px;
  margin: 20px;
}

.map-frame {
  border: 2px solid black;
  height: 100%;
  width: 100%;
  
}

#map {
  height: 100%;
}

My typescript assocated with this html file is:

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DAFormFac } from 'src/app/models/daformfac.interface';
import { DaformfacserviceService } from 'src/app/service/daformfacservice.service';
import * as L from 'leaflet';
import { MocMapService } from 'src/app/service/moc-map.service';

@Component({
  selector: 'app-daform-fac-view-full',
  templateUrl: './daform-fac-view-full.component.html',
  styleUrls: ['./daform-fac-view-full.component.css'],
})
export class DaformFacViewFullComponent 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);
   }

  daformfac: DAFormFac[] = [];

  formID: string;
  getparamformid: any;
  daformfacs: any;

  constructor(
    private daformfacservice: DaformfacserviceService,
    private route: ActivatedRoute,
    private mapService: MocMapService,
  ) {}

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

  ngOnInit(): void {
    console.log(
      this.route.snapshot.paramMap.get('facviewid'),
      ' : ID of report'
    );
    this.getparamformid = this.route.snapshot.paramMap.get('facviewid');
    this.daformfacservice
      .getOneDAFacForm(this.getparamformid)
      .subscribe((daFormFac: DAFormFac[]) => {
        this.daformfacs = daFormFac;
        console.log(daFormFac, 'response of form');
      });
  }
  
}

My services is:

import { Injectable } from '@angular/core';
import { WebRequestService } from './web-request.service';
import { HttpClient } from '@angular/common/http';
import * as L from 'leaflet'

@Injectable({
  providedIn: 'root'
})
export class MocMapService {

  baseURL: string = 'http://localhost:3000/DAFacility';
  constructor(private webReqService: WebRequestService, private http: HttpClient) { }

  getMarkers(map: L.Map): void {
    this.http.get(this.baseURL).subscribe((res: any)=> {

      for (const c of res){
        const lat = c.latitude;
        const lon = c.longitude;
        var marker = L.marker([lon, lat], {draggable: true}).addTo(map);
        marker.bindPopup(`<center><p><strong>${c.facilityName}</strong></p></center>`+ marker.getLatLng()).openPopup();
      }
    });
  }
}

and finally the index.html for the application is as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Damage Assessment Tool</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/[email protected]/dist/leaflet.css"
      integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/[email protected]/dist/leaflet.js"
      integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
      crossorigin=""
    ></script>
  </head>
  <body class="mat-typography">
    <app-root></app-root>
  </body>
</html>

I am getting a blank map, nothing is displaying it is completely empty. it had worked before in a different application but it doesnt work in this application. please help!