让 Cesium、SystemJS 和 Angular2 工作？

Question

是否有人有一个工作示例，其中 SystemJS（不是 Webpack）与 Angular2（在 TypeScript 中，不是 Dart）和 Cesium (npm) 一起使用？

我知道 cesiumjs 网站上的这个博客 post： https://cesiumjs.org/2016/01/26/Cesium-and-Webpack/

我喜欢作者的说法，"You can't simply do a 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'，并在浏览器中给我错误（转译后）：

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) {}
}

更新：

根据 @artem 的回答，我能够从浏览器中删除特定的 'Error: (SystemJS) AMD'。但是现在，如果我想引用任何 Cesium，例如 new Cesium.Viewer(...) Cesium 对象只是一张白纸。我看到的错误是

Cesium.Viewer is not a constructor

Answer 1

感谢@artem 让我大开眼界。这是对我有用的最终答案：

systemjs.config.js（参见 packages 下的 'cesium' 并注意全局变量，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.import语句是在浏览器中起作用的。):

declare var Cesium:any;
import 'cesium';

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

我相信，meta 部分有帮助，因为 Cesium 实际上需要大量的 .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'
        },

Update SystemJS 似乎无法使用 node_modules/cesium/Build 中提供的两个版本：映射到 Cesium 或 CesiumUnminified 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';

让 Cesium、SystemJS 和 Angular2 工作？

Get Cesium, SystemJS, and Angular2 to work?

typescript

cesium

systemjs

angular