Impossible d'afficher la carte mapbox-gl dans l'application angular 7

Je crée ma première application angulaire et je souhaite utiliser mapbox-gl pour afficher des cartes vectorielles. L'application affichera des informations de suivi au-dessus de cette carte avec des données provenant d'appareils GPS. J'avais l'intention d'avoir la carte comme son propre composant, puis de créer des services qui traceraient les données de suivi des appareils sélectionnés sur la carte. Cependant, j'ai du mal à afficher la carte. J'essaie de passer le centre de la carte de l'initialisation map.component.ts (qui viendra éventuellement des préférences) vers map.component.html mais cela ne fonctionne pas. Pour autant que je sache après quelques heures de recherche et d'essais différentes, je transmets correctement la valeur, mais aucune carte n'est affichée. Voici le fichier map.component.ts:

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>

et voici le fichier 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>

Et juste pour bonne mesure, les app.module.ts et app.module.html:

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;
    }

  }
}

Voici une capture d'écran de ce que je vois:

Je suis sûr qu'il me manque un concept fondamentalement simple, mais je me cogne la tête contre le mur depuis quelques heures maintenant. Quelqu'un peut-il m'indiquer la bonne direction?

Merci!