Интеграция листовок angular v18 не работает

Я пытаюсь настроить новое приложение angular v18 с интеграцией карты-листовки, но хотя я настраиваю параметры листовки почти точно так же, как я настраивал их в рабочем приложении angular 17, карта просто не хочет отображаться правильно. . На данный момент это очень минимальная настройка, но трудности с отображением карты были своего рода узким местом... Может ли кто-нибудь помочь?

конфигурация приложения:

import {
  ApplicationConfig,
  provideExperimentalZonelessChangeDetection,
} from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';

export const appConfig: ApplicationConfig = {
  providers: [
    provideExperimentalZonelessChangeDetection(),
    provideRouter(routes),
    provideAnimationsAsync(),
  ],
};

компонент карты ts:

import {
  Component,
  inject,
  AfterViewInit,
  ViewChild,
  ElementRef,
  OnInit,
} from '@angular/core';
import { MapService } from '../map.service';
import { MaterialModule } from '../../wcm-modules/material/material.module';

@Component({
  selector: 'app-map-layer',
  standalone: true,
  imports: [MaterialModule],
  template: ` <div id = "map-container">
    <div id = "map"></div>
  </div>`,
  styles: `
  .map-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  #map {
    height: 100%;
    width: 100%;
    position: relative;}
  `,
})
export class MapLayerComponent implements OnInit, AfterViewInit {
  constructor(private mapService: MapService) {}

  ngOnInit(): void {
    console.info('MapLayerComponent initialized!');
  }

  ngAfterViewInit(): void {
    console.info('Attempting to create map!');
    this.mapService.createMap('map');
  }
}

картографический сервис ТС:

import { Injectable } from '@angular/core';
import * as L from 'leaflet';

@Injectable({
  providedIn: 'root',
})
export class MapService {
  public map!: L.Map;

  // Function to create a map
  public createMap(mapId: string): any {
    console.info('Map Sercive create map function started!');
    this.map = L.map(mapId).setView([51.505, -0.09], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors',
    }).addTo(this.map);
  }
}