Получите Cesium, SystemJS и Angular2 для работы?

Question

Есть ли у кого-нибудь рабочий пример, когда SystemJS (не Webpack) используется с Angular2 (в TypeScript, а не Dart) с цезием (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) в браузере:

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:

на основе @artem-х ответ, я смог удалить определенную «Ошибка: (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. Объявление позволяет компилятору typescript знать о Cesium. Оператор импорта состоит в том, что он работает в браузере.):

declare var Cesium:any; 
import 'cesium'; 

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

Я считаю, что часть meta помогает, потому что Цезий действительно нуждается в загрузке файлов .js. Без объекта meta*.js, он захватывает только Cesium.js, чего недостаточно, независимо от того, насколько он известен или нет. Источник или нет.

Теперь у меня серьезный кризис CSS. Карта цезия - гигантский беспорядок мусора в браузере.

Answer 2

SystemJS автоматически определяет формат для CesiumUnminified/Cesium.js как amd, но по какой-либо причине он не работает как модуль amd с SystemJS.Он может быть загружен, если вы установите его формат 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. Когда я удалить format: 'cjs' из cesium пакета и изменения отображения на 'cesium': 'npm:cesium/Source', я могу получить этот код

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

для печати

function Viewer(container, options) 

в консоли. Не знаю, действительно ли это будет работать.

Answer 3

У меня есть цезий для работы с 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';