如何在Cesium Angular中创建Viewer

Question

Cesium的新手，试图在我的Angular项目中使用angular-cesium。我在使用creatViewer（）创建新视图时遇到问题。我得到了map元素，然后尝试用它创建查看器。但它给我一个错误如下图所示。

也许我没有得到正确的元素？或者它可能不是正确的HTMLElement类型。 作为附注，我可以在ngOnInit中完成所有这些吗？

component.ts

import { Component, OnInit, ViewEncapsulation, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import { CesiumService } from 'angular-cesium/src/services/cesium/cesium.service';
import { ViewerFactory } from 'angular-cesium/src/services/viewer-factory/viewer-factory.service'

@Component({
    selector: 'app-globe',
    templateUrl: './globe.component.html',
    styleUrls: ['./globe.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class GlobeComponent implements OnInit, AfterViewInit {
    cesiumViewer;
    cesiumScene;
    cesiumCanvas;
    mapElement;
    acceptAllURL = 'http://65.102.85.13:8080/rest/kml/accept/all';

    constructor(private cesiumService: CesiumService,
                private viewerFactory: ViewerFactory) {
    }

    ngOnInit() {
        // this.loadCesium();
    }

    ngAfterViewInit() {
        this.loadCesium();
    }

    loadCesium() {
        this.mapElement = window.document.getElementsByClassName('cesium-viewer');
        console.log(this.mapElement)
        this.cesiumViewer = this.viewerFactory.createViewer(this.mapElement)
        // this.cesiumCanvas = this.cesiumService.getCanvas();
        // this.cesiumScene = this.cesiumService.getScene();

        console.log(this.cesiumViewer)

        // const options = {
        //     camera : this.cesiumScene,
        //     canvas : this.cesiumCanvas,
        //     proxy : new Cesium.DefaultProxy('/proxy/')
        // };

        // const dataSourceAcceptAll = new Cesium.KmlDataSource(options);
        // dataSourceAcceptAll.load(this.acceptAllURL, options);
    }
}

错误：