Карта OpenLayers не показывает кнопку переключения

Question

у меня 3 кнопки

<button type="button" class="btn btn-outline-primary waves-effect " (click)="onClick('first')"
            [ngClass]="status === 'first' ? 'clicked' : ''">
            First
</button>

<button type="button" class="btn btn-outline-primary waves-effect " (click)="onClick('second')"
            [ngClass]="status === 'second' ? 'clicked' : ''">
            Second
</button>

<button type="button" class="btn btn-outline-primary waves-effect" (click)="onClick('third')"
            [ngClass]="status === 'third' ? 'clicked' : ''">
            Third
</button>

каждый расширяет div: второй и третий содержат экземпляр карты открытых слоев (v5.3.0)

<div *ngSwitchCase="'second'">
  <app-map-component></app-map-component>
</div>
<div *ngSwitchCase="'third'">
  <app-map-component></app-map-component>
</div>

app-map-component - простой угловой компонент, содержащий открытую карту слоев

HTML

<div id="map" class="map"></div>

TS

import { Component, OnInit } from '@angular/core';
import OlMap from 'ol/Map';
import OlVectorSource from 'ol/source/Vector';
import OlVectorLayer from 'ol/layer/Vector';
import OlXYZ from 'ol/source/XYZ';
import OlTileLayer from 'ol/layer/Tile';
import OlView from 'ol/View';
import { fromLonLat, toLonLat, transform } from 'ol/proj';
import { Fill, Stroke, Style } from 'ol/style.js';
import Feature from 'ol/Feature';


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


  map: OlMap;
  source: OlXYZ;
  layer: OlTileLayer;
  view: OlView;
  vectorSource: OlVectorSource;
  vector: OlVectorLayer;

  constructor() { }

  ngOnInit() {
      this.initializeMap();
  }

  private initializeMap() {

    this.vectorSource = new OlVectorSource({
      wrapX: false
    });

    this.vector = new OlVectorLayer({
      source: this.vectorSource,
      style: new Style({
        fill: new Fill({
          color: 'rgba(0,123,255, 0.4)'
        }),
        stroke: new Stroke({
          color: '#007bff',
          width: 4
        }),
        image: new CircleStyle({
          radius: 7,
          fill: new Fill({
            color: '#90EE90'
          })
        })
      })
    });

    this.source = new OlXYZ({
      url: 'http://tile.osm.org/{z}/{x}/{y}.png'
    });

    this.layer = new OlTileLayer({
      source: this.source
    });

    this.view = new OlView({
      center: fromLonLat([52.661594, 52.433237]),
      zoom: 4
    });

    this.map = new OlMap({
      target: 'map',
      layers: [this.layer, this.vector],
      view: this.view
    });

    navigator.geolocation.getCurrentPosition((pos) => {
      const coords = fromLonLat([pos.coords.longitude, pos.coords.latitude]);
      this.map.getView().animate({ center: coords, zoom: 10 });
    });
  }

}

• Когда страница загружается, если я нажимаю кнопку « секунда », карта загружается правильно, но если я нажимаю кнопку « третья » после » секунда ', я вижу пустой div.

• При загрузке страницы, если я нажимаю кнопку « третья », карта загружается правильно, и если я нажимаю кнопку « секунда » после » третий ', карта загружена правильно, но если я снова нажму кнопку' третий '(после' секунда '), я вижу пустой div, и так далее

Для резюме:

• второй ОК -> третий ПУСТОЙ

• третий ОК -> второй ОК -> третий ПУСТО

• третий ОК -> второй ОК -> третий ПУСТО -> второй ОК -> третий ПУСТОЙ ....

Я не вижу ошибок на консоли, и при отладке кажется, что ngOnInit вызывается правильно, когда я переключаю кнопку. Я пытался позвонить this.map.updateSize() (с этой записи), но безрезультатно. Я попытался также сделать параметр div id параметрическим, чтобы различать их, и до сих пор не дал результатов. Есть идеи об этом странном поведении?

EDIT

Проверяя HTML, я вижу, что когда я переключаюсь со «второй» кнопки на «третью» кнопку (только в этом случае), <div id='map'> содержит два div вместо одного

Как это возможно?