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

Executing an http.get request in Angular2 without using RxJS

What is the best way to convert a date to ISO 8601 format using JavaScript? Are there any built-in functions or methods in

Resetting the Angular2 poller in an ng-bootstrap accordion

It appears that Jest is having trouble comprehending the concept of "import type"

Is there a way to effectively refresh in Angular while using JBoss 6.4?

Converting numerical values into currency format using Angular

Issues with the radio-inline class in Angular and Bootstrap causing functionality errors

Caution: Npm Angular alert during package installation

Executing test units in Angular

An error occurred with code 1 when running the command "npm run build -- --prod"

Protractor Browser Instance Failure

Navigating to the detail page following a POST request in RTK query: A step-by-step guide

Having trouble installing sub npm dependencies for a private npm module

How to correctly deserialize dates in Angular 5

Creating Angular unit test modules

Angular 2: Converting JSON data into an array

Trouble with updating a variable within a loop in Cypress

Encountering ReferenceError when attempting to declare a variable in TypeScript from an external file because it is not defined

Angular 2: Creating a Reusable Object for Uniform JSON Structures

Angular 5: Validate and combine values from multiple input fields