Angular2 -在SystemJS中导入第三方javascript

Question

由于某些原因，未映射fileSaver。angular2-jwt工作正常。

我使用npm install file-saver -save来获取文件保护程序，然后引用它，如下所示(我有一个gulp任务将js文件移动到libs目录，我在那里看到了这个文件)

在index.htmlI中包含了src和system.config脚本

    <script src="libs/file-saver/FileSaver.js"></script>

<!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          } 
        } ,
        map: {
          "angular2-jwt": "libs/angular2-jwt/angular2-jwt.js"
          ,"fileSaver":"libs/file-saver/FileSaver.js"
        }
      });
      System.import('app/bootstrap')
            .then(null, console.error.bind(console));
    </script>

component.ts

在这里，它找不到fileSaver

import {SaveAs} from 'fileSaver';     

我得到的错误是

 error TS2307: Cannot find module 'fileSaver'.   

你知道这是怎么回事吗？

Answer 1

在我的例子中，我是这样工作的：

package.json

"dependencies": {
    // ... all angular dependencies
    "file-saver": "1.3.2"
 },

index.html

<!-- all angular dependencies and other 3rd party -->
<script src="node_modules/file-saver/FileSaver.js"></script>

typings.json

// other typings needed
"filesaver": "github:DefinitelyTyped/DefinitelyTyped/FileSaver/FileSaver.d.ts#d21f1bd1fd079bbc18bc88ed71d2be7f5707e33a"

使用

var blob = new Blob([this.response], {type: 'application/zip'});
saveAs(blob, 'project.zip');

在运行之前，您需要执行npm install。

就是这样，希望能有所帮助。

这不会让你import {SaveAs} from 'fileSaver';，也不会有完整的代码完成，但至少它可以工作

Answer 2

在中安装库和类型(@types)。然后,

import {saveAs} from 'file-saver';

起作用了。另外，我必须在系统JS配置中将file-saver的模块格式明确设置为cjs：

"packages":{
     "file-saver":{
          "main":"FileSaver.js", 
          "format": "cjs"
     }
}

据我所知，默认情况下，SystemJS会将文件保存程序识别为AMD模块。也许文件保护程序中的AMD模块定义有问题，但我对此理解不深。(另请参阅https://github.com/eligrey/FileSaver.js/blob/master/FileSaver.js#L182)

在没有设置cjs模块格式的情况下，我在运行时得到"fileSaver.saveAs不是一个函数“。