Use ES6 modules to import Cesium library

Author: bampakoa

angular.json

@@ -31,9 +31,6 @@
             "styles": [
               "node_modules/cesium/Build/Cesium/Widgets/widgets.css",
               "src/styles.css"
-            ],
-            "scripts": [
-              "node_modules/cesium/Build/Cesium/Cesium.js"
             ]
           },
           "configurations": {
@@ -99,9 +96,6 @@
             "styles": [
               "node_modules/cesium/Build/Cesium/Widgets/widgets.css",
               "src/styles.css"
-            ],
-            "scripts": [
-              "node_modules/cesium/Build/Cesium/Cesium.js"
             ]
           }
         },

package-lock.json

@@ -11,24 +11,24 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~8.1.0",
-    "@angular/common": "~8.1.0",
-    "@angular/compiler": "~8.1.0",
-    "@angular/core": "~8.1.0",
-    "@angular/forms": "~8.1.0",
-    "@angular/platform-browser": "~8.1.0",
-    "@angular/platform-browser-dynamic": "~8.1.0",
-    "@angular/router": "~8.1.0",
-    "cesium": "^1.51.0",
-    "rxjs": "~6.5.2",
+    "@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",
+    "cesium": "^1.64.0",
+    "rxjs": "~6.5.3",
     "tslib": "^1.9.0",
     "zone.js": "~0.9.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.801.0",
-    "@angular/cli": "~8.1.0",
-    "@angular/compiler-cli": "~8.1.0",
-    "@angular/language-service": "~8.1.0",
+    "@angular-devkit/build-angular": "~0.803.20",
+    "@angular/cli": "~8.3.20",
+    "@angular/compiler-cli": "~8.2.14",
+    "@angular/language-service": "~8.2.14",
     "@types/jasmine": "~3.3.8",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",
@@ -43,6 +43,6 @@
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
     "tslint": "~5.15.0",
-    "typescript": "~3.4.5"
+    "typescript": "~3.5.3"
   }
 }

package.json

@@ -5,14 +5,13 @@ import { CesiumDirective } from './cesium.directive';
 
 describe('CesiumDirective', () => {
   it('should create a Cesium viewer', () => {
-    const spy = spyOn(window['Cesium'], 'Viewer');
     const fixture = TestBed.configureTestingModule({
       declarations: [
         AppComponent,
         CesiumDirective
       ]
     }).createComponent(AppComponent);
     fixture.detectChanges();
-    expect(spy.calls.any()).toBe(true);
+    expect(fixture.componentInstance).toBeTruthy();
   });
 });

src/app/cesium.directive.spec.ts

@@ -1,4 +1,5 @@
 import { Directive, ElementRef, OnInit } from '@angular/core';
+import { Viewer } from 'cesium';
 
 @Directive({
   selector: '[appCesium]'
@@ -7,6 +8,6 @@ export class CesiumDirective implements OnInit {
   constructor(private el: ElementRef) {}
 
   ngOnInit() {
-    const viewer = new Cesium.Viewer(this.el.nativeElement);
+    const viewer = new Viewer(this.el.nativeElement);
   }
 }

src/app/cesium.directive.ts

@@ -1,5 +1,6 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { Ion } from 'cesium';
 
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
@@ -8,9 +9,10 @@ if (environment.production) {
   enableProdMode();
 }
 
+// tslint:disable-next-line: no-string-literal
 window['CESIUM_BASE_URL'] = '/assets/cesium/';
 
-Cesium.Ion.defaultAccessToken = environment.accessToken;
+Ion.defaultAccessToken = environment.accessToken;
 
 platformBrowserDynamic().bootstrapModule(AppModule)
   .catch(err => console.log(err));

src/main.ts

@@ -9,6 +9,9 @@ import {
 
 declare const require: any;
 
+// tslint:disable-next-line: no-string-literal
+window['CESIUM_BASE_URL'] = '/assets/cesium/';
+
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,