Angular2 - 在 SystemJS 中导入第 3 方 javascript答案

【问题标题】：Angular2 - Importing 3rd party javascript in SystemJSAngular2 - 在 SystemJS 中导入第 3 方 javascript
【发布时间】：2016-10-17 13:20:54
【问题描述】：

fileSaver 由于某种原因没有被映射。 angular2-jwt 工作正常。

我做了npm install file-saver -save 来获取文件保护程序，然后按如下方式引用它（我有一个将 js 文件移动到 libs 目录的 gulp 任务，我在那里看到了文件）

在index.html中我已经在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>

组件.ts

这里找不到fileSaver

import {SaveAs} from 'fileSaver';

我得到的错误是这样的

 error TS2307: Cannot find module 'fileSaver'.

知道这里有什么问题吗？

【问题讨论】：

你是用 TypeScript 还是 JS 开发的？
我正在使用打字稿
我真的把我的头发拉出来了..
看到这个related Quetion。
为什么 angular2-jwt 可以工作而不是另一个？这很奇怪。它是否在文件保护程序中寻找一些无法找到的附加文件？

标签： javascript express angular gulp

【解决方案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'; 也没有完整的代码完成，但在至少它有效

【讨论】：

我发现这也很有帮助：github.com/angular/angular-cli#3rd-party-library-installation

【解决方案2】：

在安装库和类型（@types）。那么，

import {saveAs} from 'file-saver';

工作。另外，我必须在系统 JS 配置中明确地将文件保护程序的模块格式设置为 cjs：

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

据我了解 SystemJS 默认会将文件保护程序识别为 AMD 模块。可能file-saver中的AMD模块定义有问题，但我对此没有很深的理解。（另见https://github.com/eligrey/FileSaver.js/blob/master/FileSaver.js#L182）

没有设置cjs模块格式，运行时出现“fileSaver.saveAs is not a function”。

【讨论】：