How to solve ` Cannot read properties of undefined (reading 'mark')` Mapbox in Angular

Question

I followed all the instructions in the web page, and a tutorial but nothing change. The map get to display but I have this error in the consolo log

`ERROR TypeError: Cannot read properties of undefined (reading 'mark')
    at Object.mark (c:/Users/Administrator/Desktop/Angular/10-mapsApp/node_modules/mapbox-gl/dist/mapbox-gl.js:31:25684)
    at Map (c:/Users/Administrator/Desktop/Angular/10-mapsApp/node_modules/mapbox-gl/dist/mapbox-gl.js:33:818463)`

Here is the component where i'm using it.

Here is the class where I'm using the component.

import { AfterViewInit, Component } from '@angular/core';

import mapboxgl from 'mapbox-gl'; // or "const mapboxgl = require('mapbox-gl');"

mapboxgl.accessToken = 'acces token';


@Component({
  selector: 'maps-full-screen-page',
  templateUrl: './full-screen-page.component.html',
  styleUrl: './full-screen-page.component.css'
})
export class FullScreenPageComponent implements AfterViewInit{

  ngAfterViewInit(): void {

    const map = new mapboxgl.Map({
      container: 'map', // container ID
      style: 'mapbox://styles/mapbox/streets-v12', // style URL
      center: [-74.5, 40], // starting position [lng, lat]
      zoom: 9, // starting zoom
    });

  }


}

This is the HTML:

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

And this is the css

#map {
  width: 100vw;
  height: 100vh;
}

I try to initialize a map using the description in the oficial page here:

https://docs.mapbox.com/mapbox-gl-js/guides/install/

and it does not work.