amcharts4地图未出现在angular 8项目中。从教程代码开始

Question

我是棱角和弹幕游戏的新手。我需要创建一个全球地图，并且已经仔细阅读了本教程，但是该地图无法渲染。仅显示下角的小水印。

map.component.html

<div id="mapdiv" style="width: 100%; height: 500px; margin: 2px;">
</div>

map.component.ts

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

import * as am4core from "@amcharts/amcharts4/core";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

import * as am4maps from "@amcharts/amcharts4/maps";

import am4geodata_worldLow from "@amcharts/amcharts4-geodata/worldLow";

am4core.useTheme(am4themes_animated);

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.less']
})
export class MapComponent implements OnInit {
    private map: am4maps.MapChart;

    constructor(private zone: NgZone) {}

    ngOnInit() {};

    ngAfterViewInit() {
    this.zone.runOutsideAngular(() => {
            let map = am4core.create("mapdiv", am4maps.MapChart);

        map.geodata = am4geodata_worldLow; 
        map.projection = new am4maps.projections.Miller();

            this.map = map;
    });
    };

    ngOnDestroy() {
    this.zone.runOutsideAngular(() => {
        if (this.map) {
        this.map.dispose();
        }
    });
    };
};

package.json在角度目录内

{
  "name": "angular",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod --build-optimizer=false",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@amcharts/amcharts4": "^4.5.3",
    "@amcharts/amcharts4-geodata": "^4.1.6",
    "@angular/animations": "~8.0.3",
    "@angular/common": "~8.0.3",
    "@angular/compiler": "~8.0.3",
    "@angular/core": "~8.0.3",
    "@angular/forms": "~8.0.3",
    "@angular/platform-browser": "~8.0.3",
    "@angular/platform-browser-dynamic": "~8.0.3",
    "@angular/router": "~8.0.3",
    "bootswatch": "^4.3.1",
    "jquery": "^3.4.1",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.6",
    "@angular/cli": "~8.0.6",
    "@angular/compiler-cli": "~8.0.3",
    "@angular/language-service": "~8.0.3",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "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",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }
}

我尝试将其移至根元素，更改为基于固定或百分比的div大小，删除并重新安装node_modules，检查chrome和firefox浏览器，并在浏览器中进行随机调整以检查元素的可见性。

预期结果是屏幕上的空白世界地图。实际结果是带有水印徽标的黑色背景