काम करने के लिए सेसियम, सिस्टमजेएस, और कोणीय 2 प्राप्त करें?

Question

क्या किसी के पास एक कामकाजी उदाहरण है जहां सेजियम (एनपीएम) के साथ SystemJS (वेबपैक नहीं) का उपयोग Angular2 (टाइपस्क्रिप्ट में, डार्ट नहीं) के साथ किया जा रहा है?

मैं cesiumjs 'साइट पर इस ब्लॉग पोस्ट के बारे में पता कर रहा हूँ: https://cesiumjs.org/2016/01/26/Cesium-and-Webpack/

और मुझे पसंद है कैसे लेखक कहते हैं, "आप बस एक require('cesium') नहीं कर सकते।" लेख के साथ समस्या यह है कि यह वेबपैक तरीके का उपयोग करता है, और मेरे पास यह उपलब्ध नहीं है।

किसी भी तरह से, मैं (ब्राउज़र से) इस विशेष त्रुटि को हल करने के लिए देख रहा हूँ: 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 
    }); 
} 

,210

और अंत में, ग्राहक कोड मेरे '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) {} 
} 

अद्यतन:

@artem के आधार पर उत्तर, मैं ब्राउज़र से विशिष्ट 'त्रुटि: (SystemJS) AMD' को हटाने में सक्षम था। लेकिन अब, अगर मैं सीज़ियम को संदर्भित करना चाहता हूं, तो new Cesium.Viewer(...)Cesium ऑब्जेक्ट केवल एक खाली स्लेट है। त्रुटि मैं देख रहा हूँ इस पर मेरी आँखों को खोलने के लिए @artem है

Cesium.Viewer is not a constructor

Answer 1

धन्यवाद। यहाँ मेरा अंतिम जवाब है कि मेरे लिए काम करता है:

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 के बारे में जानने की अनुमति देता है। आयात विवरण यह है कि यह ब्राउज़र में काम करता है।):

declare var Cesium:any; 
import 'cesium'; 

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

मेरा मानना ​​है कि meta भाग मदद करता है क्योंकि सेसियम को वास्तव में .js फ़ाइलों का बोतलबंद होना चाहिए। meta*.js संपत्ति के बिना, यह केवल Cesium.js को पकड़ता है, जो कि पर्याप्त नहीं है, चाहे खनन या नहीं, स्रोत या नहीं।

अब, मुझे एक बड़ा सीएसएस संकट मिला है। सेसियम नक्शा ब्राउज़र में जंक का एक विशाल गड़बड़ है।

Answer 2

सिस्टमजेएस CesiumUnminified/Cesium.js के लिए प्रारूप amd के रूप में स्वत: पता लगाता है, लेकिन किसी भी कारण से यह सिस्टमजेएस के साथ एमडी मॉड्यूल के रूप में काम नहीं करता है।यदि आप CommonJS करने के लिए अपने प्रारूप सेट यह लोड किया जा सकता, वह यह है कि:

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

और

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

अद्यतन यह लग रहा है SystemJS की तरह दोनों संस्करणों node_modules/cesium/Build में प्रदान की जाती का उपयोग करने में असमर्थ है: करने के लिए मानचित्रण या तो Cesium या CesiumUnminifiedBuild में परिणाम import Cesium = require('cesium'); एक खाली वस्तु को वापस कर रहा है।

हालांकि, इसे node_modules/cesium/Source में प्रदान किए गए स्रोतों से लोड किया जा सकता है। जब मैं 'cesium': 'npm:cesium/Source' को cesium पैकेज और परिवर्तन मानचित्रण से format: 'cjs' निकालने के लिए, मैं कंसोल में

function Viewer(container, options) 

मुद्रित करने के लिए इस कोड को

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

मिल सकती है। कोई विचार नहीं है कि यह वास्तव में हालांकि काम करेगा।

Answer 3

मुझे सीज़ियम को थोड़ा अलग कॉन्फ़िगरेशन का उपयोग करके कोणीय 2 और सिस्टमजेएस के साथ काम करने के लिए मिला, क्योंकि ऊपर दिए गए उत्तरों मेरे लिए काम नहीं करते थे।

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