0

js ライブラリを TypeScript ライブラリ ( tsroll ) に書き直しました (ラップしました)。このライブラリの目的はサイコロを振ることです。これをAngular2 CLI appliaで使用しようとしています

正常にインストールされました（現在、に表示されています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'
    ]
  }); 
};

結果の vendor フォルダーも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

4

1 に答える 1

2

packages以下で説明するように、tsroll ライブラリのブロックにエントリが欠落していると思います。

System.config({
  (...)
  packages: {
    tsroll: {
      defaultExtension: 'js'
    }
  }
});
于 2016-05-09T21:28:43.593 に答える