讓Cesium，SystemJS和Angular2工作？

Question

有人有一個工作的例子，其中SystemJS（不是Webpack）與Angular2（在TypeScript中，而不是在Dart中）和Cesium（npm）一起使用？

我知道在cesiumjs'網站這篇博客的： https://cesiumjs.org/2016/01/26/Cesium-and-Webpack/

而且我喜歡的作者怎麼說的，‘你不能簡單地做一個require('cesium')’。這篇文章的問題在於它使用了Webpack的方式，而我沒有這個方法。

無論哪種方式，我期待解決（從瀏覽器）此特定錯誤： Error: (SystemJS) AMD module http://localhost:3000/node_modules/cesium/Build/CesiumUnminified/Cesium.js did not define

這是我有：

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

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

最後，試圖用我的 'CesiumClock'，並給我的錯誤（transpiling後）在瀏覽器的客戶端代碼：基於@artem的

：

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回答，我能夠從瀏覽器中刪除特定的'錯誤：（SystemJS）AMD'。但是現在，如果我想參考什麼銫，new Cesium.Viewer(...)Cesium對象只是一個空白的石板。我看到的錯誤是

Cesium.Viewer is not a constructor

Answer 1

感謝@artem查找有關此打開我的眼睛。這裏是我最後的答案爲我的作品：

systemjs.config.js（見'cesium'packages下，並注意全局變量，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（注結合declare和import聲明。聲明允許打印機編譯器知道Cesium。導入聲明是它在瀏覽器中工作。）：

declare var Cesium:any; 
import 'cesium'; 

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

我相信，meta部分幫助，因爲銫實際上需要一大堆的.js文件。沒有meta*.js屬性，它只抓取Cesium.js，這是不夠的，無論縮小與否，是否來源。

現在，我有一個重大的CSS危機。 Cesium地圖是瀏覽器中的一大堆垃圾。

Answer 2

SystemJS自動檢測CesiumUnminified/Cesium.js的格式爲amd，但無論出於何種原因，它都不能用作帶有SystemJS的amd模塊。如果它的格式設置爲CommonJS的可以裝，那就是：

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

和

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

更新它看起來像SystemJS無法使用node_modules/cesium/Build提供兩個版本：映射要麼Cesium或CesiumUnminified in Build導致import Cesium = require('cesium');返回一個空對象。

但是，它可以從node_modules/cesium/Source中提供的來源加載。當我從cesium包和變化映射刪除format: 'cjs'到'cesium': 'npm:cesium/Source'，我能得到這個代碼

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

在控制檯打印

function Viewer(container, options) 

。不知道它是否會真正起作用。

Answer 3

我通過使用稍微不同的配置讓Cesium與Angular 2和SystemJS一起工作，因爲上面的答案對我無效。

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

而這app.component.js：

import 'cesium';