Question

如何使用角度为2的javascript库？我总是得到一个错误，说它不是模块。

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

我已经尝试this，我也试过this。尽管他们似乎想指出它很简单，并且你可以使用数百个库中的任何一个，但它们都没有工作。

这是一个javascript库：sheetjs

如何在角度2中完成此工作？

的index.html

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

系统config.ts

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

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

Answer 1

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

将其包含在此地图变量中。

将'xlsx'：{defaultExtension：'js'}添加到packages变量中。然后在你的index.html中添加

Answer 2

也许这会有所帮助：

我注意到，您正在尝试实现sheetjs / xlsx库。有一个可用的打字稿XLSX库here，可与angular2一起使用！

如果您正在寻找有效的演示，请查看here。

Answer 3

你没有包含你的index.html内容，但我认为是在您的基本组件之前导入<script src="../node_modules/xlsx/xlsx.js" type="text/javascript"></script>标记。如果确实如此，那么尝试在基本组件之后导入脚本，并在打字稿上使用：declare var xlsx:any;

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

3 个答案: