No markers and popup visible on map

I am using ngx-leaflet plugin for leaflet. I have setup the base layers and added a listener for leafletMapReady event. In my handler, I tried adding a marker and a custom popup. The code for the handler is given below:

initMarkers(map: L.Map) {
    let m = this.markers[0];
    L.marker(L.latLng(m.lat, m.lon)).addTo(map).bindPopup(`<b style='color: red'>${m.num}</b>`).addTo(map);
}

where m is an object {lat, lon, num}. In my HTML, I have:

<div style="height: 550px"
    leaflet
    [leafletOptions]="options"
    [leafletLayersControl]="layersControl"
    (leafletMapReady)="initMarkers($event)"
></div>

When I open my map, there are no markers. I checked the console and compilation logs and there were no errors. What am I doing wrongly?

EDIT 1

Following the suggestion from @reblace, I tried to markers as a separate array. Here's my code:

map-widget.component.html

<div style="height: 550px"
   leaflet
   [leafletOptions]="options"
   [leafletLayersControl]="layersControl"
   [leafletLayers]="markers"
   (leafletMapReady)="initMarkers($event)"
></div>



map-widget.component.ts

import { Component, OnInit, Input } from '@angular/core';
import * as L from 'leaflet';

@Component({
   selector: 'sultana-map-widget',
   templateUrl: './map-widget.component.html',
   styleUrls: ['./map-widget.component.css']
})
export class MapWidgetComponent implements OnInit {

   @Input() respMarkers: any;

   markers: Array<L.Layer> = [];
   homeCoords = {
     lat: 23.810331,
     lon: 90.412521
   };

  options: any;
  layersControl: any;

  constructor() { 
  }

  ngOnInit() {
     this.options = {
     layers: [
        (L as any).tileLayer(
           'https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.{ext}',
      {
        attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        subdomains: 'abcd',
        minZoom: 0,
        maxZoom: 15,
        ext: 'png'
      }
    )
  ],
  zoom: 7,
  center: L.latLng(this.homeCoords.lat, this.homeCoords.lon)
};
this.layersControl = {
  baseLayers: {
    "Open Street Map": L.tileLayer(
      "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      { maxZoom: 15, attribution: '' }
    ),
    "Stamen Terrain": this.stamenMap('terrain'),
  }
};
}

stamenMap(type: string) {
   return (L as any).tileLayer(
     `https://stamen-tiles-{s}.a.ssl.fastly.net/${type}/{z}/{x}/{y}.{ext}`,
     {
       attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        subdomains: 'abcd',
        minZoom: 0,
        maxZoom: 15,
        ext: 'png'
      }
   );
 }
 initMarkers(map: L.Map) {
   // respMarkers is an array of market lat-lng and resp info
   console.log('Setting up markers');
   let layers: Array<L.Layer> = [];
   let rm = this.respMarkers[0];
   let l = L.marker(L.latLng(rm.lat, rm.lon)).bindPopup(`<b style='color: red; background-color: white'>${rm.num}</b>`);
   this.markers.push(l);
   //map.addLayer(L.marker(L.latLng(rm.lat, rm.lon)).addTo(map).bindPopup(`<b style='color: red'>${rm.num}</b>`));
   //let l = new L.Marker(L.latLng(rm.lat, rm.lon)).addTo(map).bindPopup(`<b style='color: red'>${rm.num}</b>`).addTo(map);
  //map.addLayer(l);
  /*for(let rm of this.respMarkers) {
     let latLng = L.latLng(rm.lat, rm.lon);
      console.log(latLng);
      layers.push(new L.Marker(latLng).bindPopup(`$`));
  }
  L.layerGroup(layers).addTo(map);*/
}
}

I don't know how I can debug the map; I have used both firefox and chrome and checked the logs and there are no errors

Solution

Due to some issues which arise during webpack bundling you need to specify the marker icon when creating the markers.

so you need to specify the marker icon using a L.icon:

 markerIcon = {
    icon: L.icon({
      iconSize: [25, 41],
      iconAnchor: [10, 41],
      popupAnchor: [2, -40],
      // specify the path here
      iconUrl: "https://unpkg.com/[email protected]/dist/images/marker-icon.png",
      shadowUrl: "https://unpkg.com/[email protected]/dist/images/marker-shadow.png"
    })
  };

and then for instance create the markers by passing as a second argument the markerIcon:

L.marker([this.homeCoords.lat, this.homeCoords.lon], this.markerIcon)
      .addTo(this.map)
      .bindPopup(popupInfo);

At the same time you add the marker to the map and bind the popup

Demo