How can I make Cesium, SystemJS, and Angular2 compatible with each other?

Question

How can I make Cesium, SystemJS, and Angular2 compatible with each other?

Could anyone provide a working example of using SystemJS (not Webpack) with Angular2 (in TypeScript, not Dart) and Cesium (npm)?

I came across a blog post on cesiumjs' site that discusses this:

The author mentioned, "You can't simply do a require('cesium')." However, the article focuses on the Webpack way which I don't have access to.

I am encountering this error in the browser:

Error: (SystemJS) AMD module http://localhost:3000/node_modules/cesium/Build/CesiumUnminified/Cesium.js did not define

This is what my systemjs.config.js file looks like:

paths: {'npm:' :  'node_modules/'},
map: {
    app: 'dist',
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    ...
    'require': 'npm:requirejs/require.js',
    'cesium': 'npm:cesium/Build/CesiumUnminified/Cesium.js',
    ...
}

Example of using @Injectable():

let Cesium = require('cesium');
import { Injectable } from '@angular/core';

@Injectable()

export class CesiumClock {
    private _start:any = Cesium.JulianDate.now();
    private _stop:any = Cesium.JulianDate.addHours(this._start,12,new Cesium.JulianDate());
    private _clock:any = new Cesium.Clock({
        startTime: this._start,
        stopTime: this._stop,
        currentTime: this._start,
        clockRange: Cesium.ClockRange.LOOP_STOP,
        mutliplier: 1,
        shouldAnimate: true
    });
}

And here's the client code that attempts to use my 'CesiumClock', resulting in an error in the browser after transpiling:

import { Component } from '@angular/core';
import { CesiumClock } from '../services/index';

@Component({
    moduleId: module.id.replace("/dist", "/app"),
    templateUrl: 'stuff.component.html',
    styleUrls: [
        'stuff.css',
        'node_modules/cesium/Build/Cesium/Widgets/widgets.css'
    ]
 })

export class StuffComponent {
    constructor(private _cesiumClock:CesiumClock) {}
}

UPDATE:

Thanks to @artem's input, I managed to resolve the specific 'Error: (SystemJS) AMD' issue in the browser. However, now when trying to utilize anything related to Cesium, such as new Cesium.Viewer(...), the Cesium object appears empty leading to the error

Cesium.Viewer is not a constructor

angular typescript systemjs cesiumjs

Answer 1

Answer №1

Big shoutout to @artem for shedding light on this issue. Here's the final solution that really worked for me:

systemjs.config.js (Check out 'cesium' under packages and take note of the global variable, CESIUM_BASE_URL)

(function(global){
    global.CESIUM_BASE_URL = './node_modules/cesium/Build/CesiumUnminified';
    System.config({
        paths: {
            // aliases for paths
            'npm:': 'node_modules/'
        },
        map: {
            ...
            // aliases for paths
            'cesium': 'npm:cesium/Build/CesiumUnminified'
            ...
        },
        packages: {
            ...
            'cesium': {
                main: './Cesium.js',
                meta: {
                    '*.js': {
                        format: 'cjs'
                    }
                }
            },
            ...
        }
    });
})(this);

cesium.viewer.ts (Note how declare and import are combined. The declare statement lets the TypeScript compiler recognize Cesium, while the import ensures it works in the browser.)

declare var Cesium:any;
import 'cesium';

@Injectable()
export class CesiumViewer {
    ...
    this._viewer = new Cesium.Viewer(elem, {...});
    ...
}

I think the meta section is crucial because Cesium requires multiple .js files. Without the meta *.js property, only Cesium.js is fetched, which isn't sufficient, whether minified or not, sourced or not.

Now that the JavaScript part is sorted, I'm facing a major CSS crisis - the Cesium map looks like a complete mess in the browser.

Answer 2

Big shoutout to @artem for shedding light on this issue. Here's the final solution that really worked for me:

systemjs.config.js (Check out 'cesium' under packages and take note of the global variable, CESIUM_BASE_URL)

(function(global){
    global.CESIUM_BASE_URL = './node_modules/cesium/Build/CesiumUnminified';
    System.config({
        paths: {
            // aliases for paths
            'npm:': 'node_modules/'
        },
        map: {
            ...
            // aliases for paths
            'cesium': 'npm:cesium/Build/CesiumUnminified'
            ...
        },
        packages: {
            ...
            'cesium': {
                main: './Cesium.js',
                meta: {
                    '*.js': {
                        format: 'cjs'
                    }
                }
            },
            ...
        }
    });
})(this);

cesium.viewer.ts (Note how declare and import are combined. The declare statement lets the TypeScript compiler recognize Cesium, while the import ensures it works in the browser.)

declare var Cesium:any;
import 'cesium';

@Injectable()
export class CesiumViewer {
    ...
    this._viewer = new Cesium.Viewer(elem, {...});
    ...
}

I think the meta section is crucial because Cesium requires multiple .js files. Without the meta *.js property, only Cesium.js is fetched, which isn't sufficient, whether minified or not, sourced or not.

Now that the JavaScript part is sorted, I'm facing a major CSS crisis - the Cesium map looks like a complete mess in the browser.

Answer 3

Answer №2

SystemJS automatically detects the format for CesiumUnminified/Cesium.js as amd, but strangely it does not function properly as an amd module with SystemJS. However, it can be successfully loaded if you adjust its format to CommonJS:

    map: {
         ...
        'cesium': 'npm:cesium/Build/CesiumUnminified',

and

    packages: {
            ...
        cesium: {
            main: 'Cesium.js',
            format: 'cjs'
        },

Update: It seems that SystemJS struggles to utilize both versions provided in node_modules/cesium/Build: specifying either mapping to Cesium or CesiumUnminified in Build results in

import Cesium = require('cesium');

returning an empty object.

However, the Cesium file can be properly loaded from the sources provided in node_modules/cesium/Source. By removing format: 'cjs' from the cesium package and changing the mapping to 'cesium': 'npm:cesium/Source', I was able to execute this code:

 import Cesium = require('cesium');
 console.dir(Cesium.Viewer);

which resulted in:

 function Viewer(container, options)

being printed out in the console. The actual functionality of this is uncertain at this point.

Answer 4

SystemJS automatically detects the format for CesiumUnminified/Cesium.js as amd, but strangely it does not function properly as an amd module with SystemJS. However, it can be successfully loaded if you adjust its format to CommonJS:

    map: {
         ...
        'cesium': 'npm:cesium/Build/CesiumUnminified',

and

    packages: {
            ...
        cesium: {
            main: 'Cesium.js',
            format: 'cjs'
        },

Update: It seems that SystemJS struggles to utilize both versions provided in node_modules/cesium/Build: specifying either mapping to Cesium or CesiumUnminified in Build results in

import Cesium = require('cesium');

returning an empty object.

However, the Cesium file can be properly loaded from the sources provided in node_modules/cesium/Source. By removing format: 'cjs' from the cesium package and changing the mapping to 'cesium': 'npm:cesium/Source', I was able to execute this code:

 import Cesium = require('cesium');
 console.dir(Cesium.Viewer);

which resulted in:

 function Viewer(container, options)

being printed out in the console. The actual functionality of this is uncertain at this point.

Answer 5

Answer №3

I successfully integrated Cesium with Angular 2 and SystemJS after making some tweaks to the config file, as the solutions shared previously didn't quite work in my case.

Here is the updated systemjs.config.js file:

(function (global) {
  global.CESIUM_BASE_URL = './node_modules/cesium/Build/CesiumUnminified';
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
     ...
     'cesium': 'npm:cesium/Build/CesiumUnminified'
     ...
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
  ...
  'cesium': {
    main: './Cesium.js',
    meta: {
      '*.js': {
        format: 'global'
      }
    }
  }
}
});
})(this);

Additionally, I added this line to app.component.js:

import 'cesium';

Answer 6

I successfully integrated Cesium with Angular 2 and SystemJS after making some tweaks to the config file, as the solutions shared previously didn't quite work in my case.

Here is the updated systemjs.config.js file:

(function (global) {
  global.CESIUM_BASE_URL = './node_modules/cesium/Build/CesiumUnminified';
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
     ...
     'cesium': 'npm:cesium/Build/CesiumUnminified'
     ...
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
  ...
  'cesium': {
    main: './Cesium.js',
    meta: {
      '*.js': {
        format: 'global'
      }
    }
  }
}
});
})(this);

Additionally, I added this line to app.component.js:

import 'cesium';

How can I make Cesium, SystemJS, and Angular2 compatible with each other?

Answer №1

Answer №2

Answer №3

Similar questions

Is it necessary to only override the monospaced font?

Make Ionic 2 Navbar exclusively utilize setRoot() instead of pop()

What is the process for connecting a global variable to a BehaviorSubject?

Adding an interface for an object containing multiple objects requires defining the structure and behavior

Exploring Angular 2 Application Testing: Tips for Interacting with HTML Elements

What is the process for executing a particular NPM command prior to building in ASP.NET Core?

Can conditional content projection (transclusion) be achieved in Angular 2+?

Unable to test the subscribe functionality in Angular

Aurelia validation is failing to work properly when the form is already populated with data

Having trouble with installing angular-cli

Tips for triggering an error using promise.all in the absence of any returned data?

Angular 4 lazy loading feature is malfunctioning

Encountering RxJS errors during the process of constructing an object using streams retrieved from Firebase

Guide on retrieving the interface property name or key name as a string in Typescript

Removing a value from a hashmap using Typescript - what is the best way to do it?

What is the role of the "prepare" function in AWS CDK constructs?

Developing a calendar UI with similar features and functionality to Google Calendar using Ionic 2

Is it possible to utilize an npm package in TypeScript without a d.ts definition file?

Angular 7: Separate Views for Search Bar and Results

Loading the value of a Subject variable in an Angular 2 application using Typescript