Не удается отобразить карту mapbox-gl в приложении angular 7

Создаю свое первое угловое приложение и хочу использовать mapbox-gl для отображения векторных карт. Приложение будет отображать информацию об отслеживании поверх этой карты с данными, поступающими с устройств GPS. Я планировал сделать карту отдельным компонентом, а затем создать сервисы, которые будут отображать данные отслеживания с выбранных устройств на карте. Тем не менее, я изо всех сил пытаюсь отобразить карту. Я пытаюсь передать центр карты из инициализации map.component.ts (которая в конечном итоге будет получена из настроек) в map.component.html, но это не работает. Насколько я могу судить после нескольких часов поиска и разных попыток, я передаю значение правильно, но карта не отображается. Вот файл map.component.ts:

import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core';

import { LngLat, Map } from 'mapbox-gl';
import { LCONTAINER_LENGTH } from '@angular/core/src/render3/interfaces/container';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss'],
})

export class MapComponent implements OnInit, OnChanges {

  _center: LngLat;

  //refs
  _mapRef: Map;

  @Output()
  centerChange: EventEmitter<LngLat> =  new EventEmitter;

  @Input()
  set zoom(z: number) {
    this._zoom = z;
    if(this.index === 0) {
      this.zoomChange.emit(this._zoom);
    }
  }
  @Output()
  zoomChange : EventEmitter<number> = new EventEmitter;
  _zoom: number;

  @Input()
  index: number;

  constructor() { }

  ngOnInit() {
    this.zoom = 11;
    this._center = new LngLat( -121.31209, 37.449904  );
    console.log('this._center: ', this._center);

  }

  onDragZoom(e) {
    var thisMap;
    if (!this._mapRef) {
      console.warn("getFlow was called but no map is set");
      return;
    } else {
      thisMap = this._mapRef;
    }
    if(this.index === 0) {
      this._center = thisMap.getCenter();
      this.zoom = thisMap.getZoom();
    }
  }

  ngOnChanges(changes) {
    console.log('changes: ', changes);
    if (!changes) {
      return;
    }

  }
}

а вот файл map.component.html:

<p>below should be the map</p>
<div class="container" style="border: 1px ">
    <mgl-map
    [style]="'mapbox://styles/mapbox/streets-v9'"
    [zoom]="[9]"
    [center]="_center"
    (load)="map = $event">
    </mgl-map>
</div>
<p>map should be above</p>

И на всякий случай app.module.ts и app.module.html:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { NgxMapboxGLModule } from 'ngx-mapbox-gl';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MapComponent } from './map/map.component';

@NgModule({
  declarations: [
    AppComponent,
    MapComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxMapboxGLModule.withConfig({
      accessToken: '<token>', 
    }),

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN.......==">
</div>
<app-map></app-map>
<router-outlet></router-outlet>

Вот скриншот того, что я вижу:

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

Спасибо!