Get Cesium, SystemJS, and Angular2 to work?

Question

Does anyone have a working example where SystemJS (not Webpack) is used with Angular2 (in TypeScript, not Dart) with cesium (npm)?

I know this blog post on cesiumjs: https://cesiumjs.org/2016/01/26/Cesium-and-Webpack/

And I like the way the author says: "You can't just do require('cesium') ." The problem with this article is that it uses the Webpack method, and I don't have one.

In any case, I want to solve this specific error (from the browser): Error: (SystemJS) AMD module http://localhost:3000/node_modules/cesium/Build/CesiumUnminified/Cesium.js did not define

Here is what I have:

In my systemjs.config.js file:

 paths: {'npm:' : 'node_modules/'}, map: { // our app is within the dist folder app: 'dist', // angular bundles '@angular/core': 'npm:@angular/core/bundles/core.umd.js', ... 'require': 'npm:requirejs/require.js', 'cesium': 'npm:cesium/Build/CesiumUnminified/Cesium.js', // Other packages ... } 

@Injectable() Example:

 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 finally, the client code that tries to use my "CesiumClock", and gives me an error (after translation) in the browser:

 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 :

Based on @artem answer, I was able to remove the specific "Error: (SystemJS) AMD" from the browser. But now, if I want to refer to anything cesium, such a new Cesium.Viewer(...) Cesium object is just an empty slate. The error I see is

Cesium.Viewer is not a constructor

Answer 1

Thanks @artem for opening my eyes. Here is my final answer that works for me:

systemjs.config.js (see 'cesium' in the packages section and note the global variable CESIUM_BASE_URL )

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

cesium.viewer.ts (note the combined declare and import statements. The declaration declares the typescript compiler about Cesium . The import statement is that it works in a browser.):

 declare var Cesium:any; import 'cesium'; @Injectable() export class CesiumViewer { ... this._viewer = new Cesium.Viewer(elem, {...}); ... } 

I believe the meta part helps, because Cesium really needs to load .js files. Without the meta *.js property, it only captures Cesium.js, which is not enough, regardless of whether it is known or not. Source or not.

Now I have a serious CSS crisis. The cesium map is a giant junk mess in the browser.

Answer 2

SystemJS automatically determines the format for CesiumUnminified/Cesium.js as amd , but for some reason it does not work as an amd module with SystemJS. It can be loaded if you set its format to CommonJS, i.e.:

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

and

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

Update , it seems that SystemJS cannot use both versions specified in node_modules/cesium/Build : displaying either Cesium or CesiumUnminified in Build results in import Cesium = require('cesium'); returning an empty object.

However, it can be downloaded from sources provided in node_modules/cesium/Source . When I remove the format: 'cjs' from Cesium and change the mapping to 'cesium': 'npm:cesium/Source' , I can get this code

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

for print

  function Viewer(container, options) 

in the console. I don't know if this will really work.

Answer 3

I got Cesium to work with Angular 2 and SystemJS using a slightly different configuration, since the answers above did not work for me.

systemjs.config.js:

 (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); 

And this is in app.component.js :

 import 'cesium';