npm install gives typescript files with .js extension

[blubberbo]

I am trying to download the newest version in a project I have, but when I run the command npm install angular2-grid, all the .js files in the download directory are actually written in typescript (as far as I can tell). This results in the following error when I try and run the project:

Error: (SystemJS) Unexpected token <
    SyntaxError: Unexpected token <
        at eval (<anonymous>)
    Evaluating http://localhost:56159/traceur
    Error loading http://localhost:56159/traceur
    Unable to load transpiler to transpile http://localhost:56159/node_modules/angular2-grid/main.js
    Error loading http://localhost:56159/node_modules/angular2-grid/main.js as "angular2-grid" from http://localhost:56159/areas/dashboard/modules/dashboard.module.js
        at eval (<anonymous>)
    Evaluating http://localhost:56159/traceur
    Error loading http://localhost:56159/traceur
    Unable to load transpiler to transpile http://localhost:56159/node_modules/angular2-grid/main.js
    Error loading http://localhost:56159/node_modules/angular2-grid/main.js as "angular2-grid" from http://localhost:56159/areas/dashboard/modules/dashboard.module.js

[BTMorton]

The files in the install are compiled to javascript, but are using the ES6 module format which supports import/export fully. You'll need to use a transpiler of some kind (most commonly babel) for older browser support, but I'm pretty sure most modern browser have pretty good support for it now.

The error that you're getting, however, is not related to that and is due to a misconfiguration in your system. It's trying to load traceur, but reading a HTML file instead. I think you need to check your SystemJS config.

[blubberbo]

Thank you for your response, I tried to do some more troubleshooting but to no avail. Below is my systemjs.config.js:

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    var paths = {
        // paths serve as alias
        'npm:': BaseUrl + '/node_modules/',
        'base:': BaseUrl + '/'
    };
    // map tells the System loader where to look for things
    var map = {
        'dashboard': 'base:areas/dashboard', // 'dist',
        '@angular': 'npm:@angular',
        'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
        'rxjs': 'npm:rxjs',
        'ng2-charts': 'base:areas/dashboard/plugins/ng2-charts',
        //'angular2-grid': 'base:areas/dashboard/plugins/angular2-grid/dist',
        'angular2-grid': 'npm:angular2-grid',
        'chartjs': 'base:areas/dashboard/plugins/chart.js/dist/',
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'dashboard': { main: 'dashboard.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
        "ng2-charts": { defaultExtensions: 'js' },
        'angular2-grid': { main: 'main.js', defaultExtensions: 'js' },
        'lodash': { main: 'index.js', defaultExtensions: 'js' },
        'chartjs': { main: 'Chart.bundle.js', defaultExtensions: 'js' },
    };
    var ngPackageNames = [
      'common',
      'compiler',
      'core',
      'forms',
      'http',
      'platform-browser',
      'platform-browser-dynamic',
      'router',
      'router-deprecated',
      'upgrade',
    ];
    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    }
    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);
    var config = {
        paths: paths,
        map: map,
        packages: packages
    };
    System.config(config);
})(this);

Futhermore, I am not sure if it is related but my tsconfig.js is has:

"compilerOptions": {
    "target": "es5",
     ...
}

not sure if that is related, but I have to have it as es5 and not es6 because of other dependencies.

Is something incorrect in my systemjs config?

Thank you

[blubberbo]

I am assuming there is some sort of transpiling that needs to occur for theses special .js files. Is there somewhere I need to set that up or configure that in my system config?

Thanks a lot for the help!