如何包含角度为2的javascript库？

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

Answer 2

Maybe this helps:

I noticed, that you are trying to implement the sheetjs/xlsx library. There is a working XLSX library for typescript available here , which works with angular2!

If you are looking for a working demo, have a look here .

Answer 3

You dont included your index.html content, but I assume that the <script src="../node_modules/xlsx/xlsx.js" type="text/javascript"></script> tag is imported before your base component . If that is true then try to import the script after the base component and on typescript use: declare var xlsx:any;