westandy westandy - 11 days ago 21
TypeScript Question

Get Cesium, SystemJS, and Angular2 to work?

Does somebody have a working example where SystemJS (not Webpack) is being used with an Angular2 (in TypeScript, not Dart) with Cesium (npm)?

I am aware of this blog post on cesiumjs' site:
https://cesiumjs.org/2016/01/26/Cesium-and-Webpack/

And I like how the author says, "You can't simply do a

require('cesium')
." The problem with the article is that it uses the Webpack way, and I do not have that available.

Either way, I am looking to solve this particular error (from the Browser):
Error: (SystemJS) AMD module http://localhost:3000/node_modules/cesium/Build/CesiumUnminified/Cesium.js did not define


Here's 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 the error (after transpiling) 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
's 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
new Cesium.Viewer(...)
the
Cesium
object is just a blank slate. The error I see is

Cesium.Viewer is not a constructor

Answer

Thanks to @artem for opening my eyes on this. Here's my final answer that works for me:

systemjs.config.js (perhaps some of this is unnecessary but I don't care at this point):

    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'
                }
            }
        }
    },

cesium.viewer.ts:

import 'cesium';

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

And now I'm getting errors that tell me new Cesium.Viewer is actually working.

The meta part helps because Cesium actually needs a boatload of .js files. Without the meta *.js property, it only grabs Cesium.js, which is not enough, regardless of minification or not, Source or not.