angular - Cum să faci ca Cesium, SystemJS și Angular2 să funcționeze?

Există cineva care are un exemplu funcțional în care SystemJS (nu Webpack) este utilizat cu Angular2 (în TypeScript, nu Dart) împreună cu Cesium (npm)?

Sunt conștient de această postare pe blog pe site-ul cesiumjs: https://cesiumjs.org/2016/01/26/Cesium-and-Webpack/

Și îmi place cum spune autorul: „Nu poți pur și simplu să faci require('cesium').” Problema cu articolul este că folosește metoda Webpack, iar eu nu am asta disponibil.

Oricum, încerc să rezolv această eroare particulară (din Browser): Error: (SystemJS) modulul AMD http://localhost:3000/node_modules/cesium/Build/CesiumUnminified/Cesium.js nu a definit

Iată ce am:

În fișierul meu systemjs.config.js:

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
    ...
}

Exemplu @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
    });
}

Și în final, codul clientului care încearcă să folosească 'CesiumClock'-ul meu și îmi dă eroarea (după transpilare) în 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) {}
}

ACTUALIZARE:

Pe baza răspunsului lui @artem, am reușit să elimin eroarea specifică 'Error: (SystemJS) AMD' din browser. Dar acum, dacă vreau să mă refer la orice din Cesium, precum new Cesium.Viewer(...), obiectul Cesium este doar un tablou gol. Eroarea pe care o văd este

Cesium.Viewer is not a constructor

Răspuns #1

Mulțumesc lui @artem pentru că mi-a deschis ochii asupra acestui lucru. Iată răspunsul meu final care funcționează pentru mine:

systemjs.config.js (Vezi 'cesium' sub packages și notează variabila globală, 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 (Observați combinația dintre declarațiile declare și import. Declararea permite compilatorului TypeScript să știe despre Cesium. Declarația import este pentru că funcționează în browser.):

declare var Cesium:any;
import 'cesium';

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

Cred că partea meta ajută pentru că Cesium are nevoie de o mulțime de fișiere .js. Fără proprietatea meta *.js, preia doar Cesium.js, ceea ce nu este suficient, indiferent dacă este minificat sau nu, sursă sau nu.

Acum, am o criză majoră de CSS. Harta Cesium este un morman uriaș de gunoi în browser.

Răspunsul #2

SystemJS detectează automat formatul pentru CesiumUnminified/Cesium.js ca amd, dar dintr-un motiv oarecare nu funcționează ca modul amd cu SystemJS. Poate fi încărcat dacă îi setezi formatul la CommonJS, adică:

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

și

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

Actualizare se pare că SystemJS nu poate folosi ambele versiuni furnizate în node_modules/cesium/Build: maparea fie către Cesium, fie către CesiumUnminified în Build rezultă în import Cesium=require('cesium'); care returnează un obiect gol.

Totuși, acesta poate fi încărcat din sursele furnizate în node_modules/cesium/Source. Când elimin format: 'cjs' din pachetul cesium și schimb maparea în 'cesium': 'npm:cesium/Source', pot obține acest cod

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

a imprima

 function Viewer(container, options)

în consolă. Nici o idee dacă va funcționa cu adevărat totuși.