如何包含带有angular 2的JavaScript库? [英] How do I include a javascript library with angular 2?

问题描述

如何使用angular 2的JavaScript库?我总是收到一个错误消息，说它不是模块.

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

如果我在指向javascript文件的index.html文件中添加脚本标记，然后将其添加到System.config下的路径下，然后导入，则会收到错误消息，指出它不是模块.

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.

这是一个JavaScript库: sheetjs

Here is a javascript library: sheetjs

我该如何以角度2进行这项工作?

How do I make this work in angular 2?

index.html

index.html

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

system-config.ts

system-config.ts

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

something.ts

something.ts

import * as xlsx from 'xlsx';

错误消息:

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'.

推荐答案

我的systemjs.config.js

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

将其包含在此map变量中.

include it in the map variable in this.

将'xlsx':{defaultExtension:'js'}添加到包变量中.然后在您的index.html中添加

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

这篇关于如何包含带有angular 2的JavaScript库?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！