如何包含 angular 2 的 javascript 库？答案

【问题标题】：How do I include a javascript library with angular 2?如何包含 angular 2 的 javascript 库？
【发布时间】：2017-06-14 03:46:58
【问题描述】：

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

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

我已经尝试过this，我也尝试过this。尽管他们似乎喜欢指出这很容易，而且您可以使用数百个库中的任何一个，但它们都不起作用。

这是一个 javascript 库：sheetjs

如何在 Angular 2 中进行这项工作？

index.html

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

系统配置.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'.

【问题讨论】：

alert("Hello, world!");

标签： javascript typescript angular

【解决方案1】：

我的系统js.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' }, 到包变量。然后在你的 index.html 之后添加

【讨论】：

好的，我已将它添加到地图变量中。所以现在map也包含：'xlsx': '../node_modules/xlsx/xlsx.js'但是还是和上面一样的错误。
还将 'xlsx': { defaultExtension: 'js' }, 添加到 packages 变量中。然后在你的 index.html 中在 <body> 之后添加 <script src="systemjs.config.js"></script>
我已将其添加到包中，并在正文之后将 <script src="system-config.js"></script> 添加到 index.html 中 - 仍然是同样的错误

【解决方案2】：

也许这会有所帮助：

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

如果您正在寻找工作演示，请查看here。

【讨论】：

【解决方案3】：

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

【讨论】：