Я работаю над проектом angular и хочу использовать Mapbox. Я следовал этому руководству на medium , где показано, как это сделать. Когда я пытался запустить сервер, я получал такой результат. 
Я искал везде, но не нашел решения проблемы.
Вот мой код
Компонент TripPlanner
import { Component, OnInit } from "@angular/core";
import { environment } from "../../environments/environment";
import * as mapboxgl from "mapbox-gl";
@Component({
selector: "app-trip-planner",
templateUrl: "./trip-planner.component.html",
styleUrls: ["./trip-planner.component.css"]
})
export class TripPlannerComponent implements OnInit {
map: mapboxgl.Map;
style = "mapbox://styles/mapbox/streets-v11";
lat = 37.75;
lng = -122.41;
constructor() {}
ngOnInit() {
mapboxgl.accessToken = environment.mapbox.accessToken;
this.map = new mapboxgl.Map({
container: "map",
style: this.style,
zoom: 13,
center: [this.lng, this.lat]
});
// Add map controls
this.map.addControl(new mapboxgl.NavigationControl());
}
}
Мой индекс. html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Trip</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link
href="https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css"
rel="stylesheet"
/>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
</head>
<body>
<app-root> </app-root>
</body>
</html>
Мой пакет. json
{
"name": "trip",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~8.2.14",
"@angular/common": "~8.2.14",
"@angular/compiler": "~8.2.14",
"@angular/core": "~8.2.14",
"@angular/forms": "~8.2.14",
"@angular/platform-browser": "~8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
"@angular/router": "~8.2.14",
"@auth0/angular-jwt": "^4.0.0",
"@fortawesome/fontawesome-free": "^5.12.1",
"@ng-bootstrap/ng-bootstrap": "^5.0.0",
"@popperjs/core": "^2.0.6",
"bootstrap": "^4.4.1",
"jquery": "^3.4.1",
"mapbox-gl": "^1.8.0",
"popper.js": "^1.16.1",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^8.4.1",
"@angular-devkit/build-angular": "~0.803.22",
"@angular/cli": "~8.3.22",
"@angular/compiler-cli": "~8.2.14",
"@angular/language-service": "~8.2.14",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/mapbox-gl": "^0.51.10",
"@types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-scss": "^2.0.0",
"protractor": "~5.4.0",
"tailwindcss": "^1.2.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
}
}