Импорт импортов в Angular CLI

Question

Я переписал (обернул) библиотеку js как TypeScript один (tsroll). Цель этой библиотеки - бросить кубики. Я пытаюсь использовать это в своем приложении Angular2 CLI

Я установил его успешно (он теперь отображается в моем node_modules). Я добавил его к angular-cli-build.js файла:

module.exports = function(defaults) { 
    return new Angular2App(defaults, { 
    vendorNpmFiles: [ 
     'systemjs/dist/system-polyfills.js', 
     'systemjs/dist/system.src.js', 
     'zone.js/dist/*.js', 
     'es6-shim/es6-shim.js', 
     'reflect-metadata/*.js', 
     'rxjs/**/*.js', 
     '@angular/**/*.js', 
     'tsroll/dist/tsroll.js' 
    ] 
    }); 
}; 

Я также добавил результирующую папку поставщика к моему src/system-config.ts файла:

// Apply the CLI SystemJS configuration. 
System.config({ 
    map: { 
    '@angular': 'vendor/@angular', 
    'rxjs': 'vendor/rxjs', 
    'main': 'main.js', 
    'tsroll': 'vendor/tsroll/dist' 
    }, 
    packages: cliSystemConfigPackages 
}); 

Я также импортировать его в мой die-roller.component.ts файл:

import { Component, OnInit } from '@angular/core'; 
import * as tsroll from 'tsroll/tsroll'; 


@Component({ 
    moduleId: module.id, 
    selector: 'die-roller-app', 
    templateUrl: 'die-roller.component.html', 
    styleUrls: ['die-roller.component.css'] 
}) 
export class DieRollerComponent implements OnInit { 

    numberOf: number; 
    sides = [2, 4, 6, 8, 10, 12, 20, 100]; 
    selectedSide: number; 

    constructor() {} 

    ngOnInit() { 
    this.numberOf = 1; 
    this.selectedSide = 20; 
    } 
    onSubmit(event) { 
    console.log(this.numberOf); 
    console.log(this.sides); 
    console.log(this.selectedSide); 
    // this line give me probs 
    var dr = new tsroll.DiceRoller.Droll(); 
    } 
} 

Который дает мне следующую ошибку:

zone.js:101 GET http://localhost:4200/vendor/tsroll/dist/tsroll 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM20162:3fetchTextFromURL @ system.src.js:1154(anonymous function) @ system.src.js:1735ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1734(anonymous function) @ system.src.js:2759(anonymous function) @ system.src.js:3333(anonymous function) @ system.src.js:3600(anonymous function) @ system.src.js:3985(anonymous function) @ system.src.js:4448(anonymous function) @ system.src.js:4700(anonymous function) @ system.src.js:406ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426 
zone.js:461 Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/tsroll/dist/tsroll 
     at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:4200/vendor/zone.js/dist/zone.js:769:30) 
     at ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:356:38) 
     at Zone.runTask (http://localhost:4200/vendor/zone.js/dist/zone.js:256:48) 
     at XMLHttpRequest.ZoneTask.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:423:34) 
    Error loading http://localhost:4200/vendor/tsroll/dist/tsroll as "tsroll/tsroll" from http://localhost:4200/app/die-roller/die-roller.component.js ; Zone: <root> ; Task: Promise.then ; Value: Error: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/tsroll/dist/tsroll(…)consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426 
zone.js:463 Error: Uncaught (in promise): Error: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/tsroll/dist/tsroll(…) 

Как импортировать собственный/заимствованный TypeScript в проект Angular2 CLI?

я вставил то, что я думал, что соответствующий код здесь, но полный код можно найти:

https://github.com/jdell64/testCli

Answer 1

Я думаю, что запись отсутствует в packages блоке для вашего tsroll libary, а ниже:

System.config({ 
    (...) 
    packages: { 
    tsroll: { 
     defaultExtension: 'js' 
    } 
    } 
});