How do I include a javascript library with angular 2?

Question

How do I use a javascript library with angular 2? I always get an error saying it's not a module.

If I add a script tag to my index.html file pointing to the javascript file, then add it under paths under System.config, then import it, I get an error stating that it's not a module.

I've already tried this and I've also tried this. Neither of them work despite the fact they seem to like to point out that it's easy, and that you can use any of hundreds of libraries.

Here is a javascript library: sheetjs

How do I make this work in angular 2?

index.html

<script src="../node_modules/xlsx/xlsx.js" type="text/javascript"></script>

system-config.ts

System.config({
...
     path: {
      xlsx: '../node_modules/xlsx/xlsx.js'
    }
});

something.ts

import * as xlsx from 'xlsx';

Error message:

Error: Typescript found the following errors:
  C:/___/tmp/broccoli_type_script_compiler-input_base_path-o4TZ9PSC.tmp/0/src/app/something/something.component.ts (9, 23): Cannot find module 'xlsx'.

Answer 1

my systemjs.config.js

 (function(global) {
      // map tells the System loader where to look for things
      var map = {
        'src':                        'src', // 'dist',
        'bin':                        'bin',
        '@angular':                   '/node_modules/@angular',
        'angular2-in-memory-web-api': '/node_modules/angular2-in-memory-web-api',
        'rxjs':                       '/node_modules/rxjs'
      };
      // packages tells the System loader how to load when no filename and/or no extension
      var packages = {
        'src':                        { defaultExtension: 'js' },
        'bin':                        { defaultExtension: 'js' },
        'rxjs':                       { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
      };
      var ngPackageNames = [
        'common',
        'compiler',
        'core',
        '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: 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 = {
        map: map,
        packages: packages
      }
      System.config(config);
    })(this);

include it in the map variable in this.

add 'xlsx': { defaultExtension: 'js' }, to packages variable. then in your index.html add after the