Czy Ciumium, SystemJS i Angular2 działają?

Question

Czy ktoś ma działający przykład, w którym SystemJS (nie Webpack) jest używany z Angular2 (w TypeScript, nie Dart) z cezem (npm)?

Zdaję sobie sprawę z tego blogu na miejscu cesiumjs': https://cesiumjs.org/2016/01/26/Cesium-and-Webpack/

I lubię jak autor mówi: «Nie można po prostu zrobić require('cesium')». Problem z tym artykułem polega na tym, że używa on sposobu Webpacka, a ja go nie mam.

Tak czy inaczej, szukam rozwiązania tego konkretnego błędu (od przeglądarki): Error: (SystemJS) AMD module http://localhost:3000/node_modules/cesium/Build/CesiumUnminified/Cesium.js did not define

Oto co mam:

W moim systemjs.config.js pliku:

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() przykładu :

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 wreszcie, kod klienta, który stara się wykorzystać moje 'CesiumClock' i daje mi błąd (po transpiling) w przeglądarce:

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:

podstawie @artem „s Odpowiedź, udało mi się usunąć specyficzny "Błąd: (SystemJS) AMD" z przeglądarki. Ale teraz, jeśli chcę odwoływać się do czegokolwiek cezu, to taki obiekt new Cesium.Viewer(...) jest obiektem pustym. Błąd widzę jest

Cesium.Viewer is not a constructor

Answer 1

Dzięki @artem za otwarcie mi oczy na to. Oto moja ostateczna odpowiedź, że pracuje dla mnie:

systemjs.config.js (Patrz 'cesium' pod packages i zanotować zmienną globalną, 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 (uwaga Połączone instrukcje declare i import. Deklaracja umożliwia kompilatorowi maszynopisanie uzyskanie informacji o Cesium. Instrukcja importu jest taka, że ​​działa w przeglądarce.):

declare var Cesium:any; 
import 'cesium'; 

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

Wydaje mi się, że część meta pomaga, ponieważ Cesium faktycznie potrzebuje plików zawierających pliki .js. Bez właściwości meta*.js chwyta tylko Cesium.js, co nie jest wystarczające, niezależnie od tego, czy jest zminimalizowane, czy nie, Źródło lub nie.

Teraz mam poważny kryzys CSS. Mapa cezu to gigantyczny bałagan w przeglądarce.

Answer 2

SystemJS automatycznie wykrywa format dla CesiumUnminified/Cesium.js jako amd, ale z jakiegokolwiek powodu nie działa jako moduł amd z SystemJS.Może być ładowany jeśli ustawisz jego format do CommonJS, czyli:

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

i

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

Aktualizacja wygląda SystemJS nie jest w stanie korzystać z obu wersji przewidziane w node_modules/cesium/Build: Odwzorowanie albo Cesium lub CesiumUnminified w Build wyniki: import Cesium = require('cesium'); zwraca pusty obiekt.

Jednak można go załadować ze źródeł podanych w node_modules/cesium/Source. Kiedy usunąć format: 'cjs' z cesium pakiet zmian i mapowanie do 'cesium': 'npm:cesium/Source', mogę dostać ten kod

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

wydrukować

function Viewer(container, options) 

w konsoli. Nie mam pojęcia, czy to zadziała.

Answer 3

Mam Cesium do pracy z Angular 2 i SystemJS przy użyciu nieco innej konfiguracji, ponieważ powyższe odpowiedzi nie działają dla mnie.

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

a to z app.component.js:

import 'cesium';