Issue importing Typescript in Angular CLI

Question

I rewrote (wrapped) a js library to be a TypeScript one (tsroll). The purpose of this library is to roll dice. I am trying to use this in my Angular2 CLI applia

I installed it successfully (it now appears in my node_modules). I added it to the angular-cli-build.js file:

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'
    ]
  }); 
};

I also added the resulting vendor folder to my src/system-config.ts file:

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

I also import it into my die-roller.component.ts file:

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

Which gives me the following error:

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(…)

How do I import my own/borrowed TypeScript into an Angular2 CLI Project?

I pasted what I thought was relevant code in here, but the full code can be found:

https://github.com/jdell64/testCli

Answer 1

I think that an entry is missing in the packages block for your tsroll libary, as described below:

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