Nhận Cesium, SystemJS và Angular2 để hoạt động?

Question

Có ai đó có một ví dụ làm việc trong đó SystemJS (không phải Webpack) đang được sử dụng với một Angular2 (trong TypeScript, không phải Dart) với Cesium (npm) không?

tôi biết bài viết trên blog này trên trang web cesiumjs': https://cesiumjs.org/2016/01/26/Cesium-and-Webpack/

Và tôi thích cách tác giả nói, 'Bạn có thể không chỉ đơn giản là làm một require('cesium').' Vấn đề với bài viết là nó sử dụng cách Webpack, và tôi không có sẵn.

Dù bằng cách nào, tôi đang tìm cách để giải quyết lỗi này cụ thể (từ trình duyệt): Error: (SystemJS) AMD module http://localhost:3000/node_modules/cesium/Build/CesiumUnminified/Cesium.js did not define

Dưới đây là những gì tôi có:

Trong systemjs.config.js tập tin của tôi:

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() Ví dụ :

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

Và cuối cùng, mã khách hàng mà cố gắng để sử dụng 'CesiumClock' của tôi, và mang lại cho tôi những lỗi (sau khi transpiling) trong trình duyệt:

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

CẬP NHẬT:

Dựa trên @artem 's câu trả lời, tôi đã có thể loại bỏ cụ thể 'Lỗi: (SystemJS) AMD' từ trình duyệt. Nhưng bây giờ, nếu tôi muốn nói đến bất cứ điều gì Cesium, chẳng hạn new Cesium.Viewer(...) đối tượng Cesium chỉ là một phương tiện trống. Lỗi tôi thấy là

Cesium.Viewer is not a constructor

Answer 1

Nhờ @artem vì đã mở mắt về điều này. Dưới đây là câu trả lời cuối cùng của tôi làm việc cho tôi:

systemjs.config.js (Xem 'cesium' dưới packages và lưu ý các biến toàn cầu, 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 (Lưu ý kết hợp các câu hỏi declare và import. Tuyên bố cho phép trình biên dịch bản ghi biết về Cesium. Câu lệnh nhập là nó hoạt động trong trình duyệt.):

declare var Cesium:any; 
import 'cesium'; 

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

Tôi tin rằng, phần meta giúp vì Cesium thực sự cần một lượng tải tệp .js. Không có thuộc tính meta*.js, nó chỉ lấy Cesium.js, không đủ, bất kể việc rút gọn hay không, Nguồn hay không.

Bây giờ, tôi đã có một cuộc khủng hoảng CSS lớn. Bản đồ Cesium là một đống rác khổng lồ trong trình duyệt.

Answer 2

SystemJS tự động phát hiện định dạng cho CesiumUnminified/Cesium.js là amd, nhưng vì bất kỳ lý do gì, nó không hoạt động như mô đun amd với SystemJS.Nó có thể được nạp nếu bạn thiết lập định dạng của nó để CommonJS, đó là:

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

và

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

Cập nhật nó trông giống như SystemJS là không thể sử dụng cả hai phiên bản được cung cấp trong node_modules/cesium/Build: lập bản đồ cho một trong hai Cesium hoặc CesiumUnminified trong kết quả Build trong import Cesium = require('cesium'); trả lại đối tượng trống.

Tuy nhiên, nó có thể được tải từ các nguồn được cung cấp trong node_modules/cesium/Source. Khi tôi loại bỏ format: 'cjs' từ cesium gói và thay đổi bản đồ để 'cesium': 'npm:cesium/Source', tôi có thể nhận được mã này

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

in

function Viewer(container, options) 

trong giao diện điều khiển. Không có ý tưởng nếu nó thực sự sẽ làm việc mặc dù.

Answer 3

Tôi nhận Cesium để làm việc với Angular 2 và SystemJS bằng cách sử dụng cấu hình hơi khác, vì câu trả lời ở trên không hiệu quả đối với tôi.

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

Và điều này trong app.component.js:

import 'cesium';