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
  • Install angular-cesium:
    $ npm install --save angular-cesium
Import and add AngularCesiumModule to your app root module:
import { AngularCesiumModule } from 'angular-cesium';
// ....
declarations: [],
imports: [
// ...
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": [ // ...
    "scripts": [ // ...
  • 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": [
  • 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
    * 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 -
  • 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;