Angular2-在SystemJS中導入第三方JavaScript

Question

由於某種原因，fileSaver沒有被映射。 angular2-jwt工作正常。

我做了npm install file-saver -save來獲取文件保護程序，然后按如下方式引用了它（我有一個gulp任務，將js文件移動到libs目錄，我在那里看到文件）

在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>

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>

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

工作了。 另外，我必須在System 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不是函數”的情況。