angular - چگونه Cesium، SystemJS و Angular2 را به کار بیندازیم؟

آیا کسی یک مثال عملی دارد که در آن از SystemJS (نه Webpack) با Angular2 (در TypeScript، نه Dart) و Cesium (npm) استفاده شده باشد؟

من از این پست وبلاگ در سایت cesiumjs مطلع هستم: https://cesiumjs.org/2016/01/26/Cesium-and-Webpack/

و من از اینکه نویسنده میگوید، «شما نمیتوانید به سادگی یک require('cesium') انجام دهید.» خوشم میآید. مشکل مقاله این است که از روش Webpack استفاده میکند و من آن را در دسترس ندارم.

به هر حال، من به دنبال حل این خطای خاص هستم (از مرورگر): Error: (SystemJS) ماژول AMD http://localhost:3000/node_modules/cesium/Build/CesiumUnminified/Cesium.js تعریف نشده است

این چیزی است که من دارم:

در فایل 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

پاسخ شماره ۱

از @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 توجه کنید. دستور declare به کامپایلر تایپاسکریپت اجازه میدهد تا درباره 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 دارم. نقشه سیسیم یک آشفتگی عظیم از زبالهها در مرورگر است.

پاسخ شماره ۲

SystemJS بهطور خودکار فرمت CesiumUnminified/Cesium.js را بهعنوان amd تشخیص میدهد، اما به هر دلیلی بهعنوان ماژول amd با SystemJS کار نمیکند. میتوان آن را بارگذاری کرد اگر فرمت آن را روی CommonJS تنظیم کنید، یعنی:

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

و

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

بهروزرسانی به نظر میرسد که 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)

در کنسول. اما هیچ ایدهای ندارم که واقعا کار کند یا نه.