Mapbox with Angular 6. "map container not found" error

I had the same issue and resolved it by using @ViewChild to locate the map element. Here's a bare-bones Angular component that will show a Mapbox map.

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';import mapboxgl from 'mapbox-gl';@Component({  selector: 'app-map',  template: '<div #mapElement style="height:200px"></div>'})export class MapComponent implements OnInit {    map: mapboxgl.Map;    @ViewChild('mapElement') mapElement: ElementRef;    constructor() { }    ngOnInit() {        mapboxgl.accessToken = 'ACCESS_TOKEN_HERE';    }    ngAfterViewInit(){        this.map = new mapboxgl.Map({            container: this.mapElement.nativeElement,            style: 'mapbox://styles/mapbox/streets-v9'        });    }   }

I had this issue, so I just added a setTimeOut to the method:

Oninit(){  setTimeout(() => {      let mymap = L.map('mapid').setView([51.505, -0.09], 13);  L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=<key>', {    attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',    maxZoom: 18,    id: 'mapbox/streets-v11',    tileSize: 512,    zoomOffset: -1,    accessToken: 'your.mapbox.access.token'  }).addTo(mymap);  }, 100);}