How to include the leaflet map in angular formly with custom component

Question

I have to create the leaflet map where I have used the angular formly .

and I have created the custom component for leaflet map as

leaflet.component.ts

import { Component, OnInit } from '@angular/core';
declare let L: any

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class LeafletComponent implements OnInit {

    constructor() {

    }

    ngOnInit() {
        const map = L.map('map').setView([51.509865,-0.118092], 10);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);
    }

}

And I ahve included the css and html for the above map in main Angular formly component as

.formly.component.html

  <mat-tab label="AREAS COVERED">
      
        <div id="map"></div>
      </mat-tab>

.formly.component.css

div{
    height: 500px;
    width: 500px;
}

and In app.module.ts I have added the custom component as

app.module.ts

import { LeafletComponent } from './ang-formly/ang-formly/leaflet-component';

@NgModule({
  declarations: [
    AppComponent,

LeafletComponent,

Now the Map is not loading Can anyone help me how to add this custom component in angular formly