Option 1: Using Angular CLI

If you are using Angular CLI, you can add the angular-cesium library using schematics

$ ng add angular-cesium

Option 2: Manual Install

For existing project just install angular-cesium

$ npm install --save angular-cesium

For new Angular CLI project

• If you didn't installed Angular CLI yet:

    $ npm install -g @angular/cli

• Start new project:

    $ ng new PROJECT_NAME
    $ cd PROJECT_NAME

• Install angular-cesium:

  $ npm install --save angular-cesium

Import and add AngularCesiumModule to your app root module:

  import { AngularCesiumModule } from 'angular-cesium';
  // ....
  @NgModule({
      declarations: [],
      imports: [
          // ...
          AngularCesiumModule.forRoot()
      ],
      bootstrap: [AppComponent]
  })
  export class AppModule {
  }

AngularCesiumModule configuration

• The main module should be loaded with .forRoot() in order to make the module perform enhancements to Cesium, However, the module can be loaded with out calling forRoot().

• .forRoot() excepts an optional option object of type ModuleConfiguration where every option can be toggled on or off. If no options object is passed, a default one will be used.

Cesium fixes / enhancements:

• Fix entities shadowing bug - fixEntitiesShadows

Cesium configuration

In order to use cesium you must serve some assets from cesium package. The following configuration is for angular-cli projects, for webpack users try this.

• install cesium via:

  $ npm install --save cesium

• Add cesium assets, script and css in .angular-cli.json or angular.json(Angular >=6) file:

     "assets": [ // ...
       { "glob": "**/*", "input": "./node_modules/cesium/Build/Cesium", "output": "./assets/cesium" }
      ],
     "styles": [ // ...
       "./node_modules/cesium/Build/Cesium/Widgets/widgets.css"
     ],
     "scripts": [ // ...
       "./node_modules/cesium/Build/Cesium/Cesium.js"
     ],

• To avoid ReferenceError: Cesium is not defined errors when running unit tests, add Cesium scripts in .angular-cli.json or angular.json(Angular >=6) file in the test block of the app configuration. Note that in the example below, only the relevant sections and values are shown.

  "projects": {
     "angular-cesium-demo": {
       "architect": {
         "test": {
           "scripts": [
               "./node_modules/cesium/Build/Cesium/Cesium.js"
             ],
         }
       }
     }
  }

• Add CESIUM_BASE_URL in main.ts file, before bootstrapping:

    // ...
    window['CESIUM_BASE_URL'] = '/assets/cesium'; // If youre using Cesium version < 1.42.0 add this line
    Cesium.buildModuleUrl.setBaseUrl('/assets/cesium/'); // If youre using Cesium version >= 1.42.0 add this line
    platformBrowserDynamic().bootstrapModule(AppModule);

  * Duplication of Cesium base url setting method is caused by a Cesium bug that was introduced in Cesium version 1.42 and should be fixed in Cesium 1.45 - https://github.com/AnalyticalGraphicsInc/cesium/issues/6411​

• Add declare var Cesium; to typing.d.ts file (add the file to src directory).

• You can configure cesium viewer style:

   // styles.css
   html, body, .map-container {
       width: 100%;
       height: 100%;
       margin: 0;
       padding: 0;
       overflow: hidden;
       position: relative;
   }