在 Angular CLI 中导入 Typescript 的问题

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

我认为您的 tsroll 库的 packages 块中缺少一个条目，如下所述：

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