Angular2 - Importing 3rd party javascript in Syste

问题:

fileSaver not getting mapped for some reason. angular2-jwt is working fine.

I did npm install file-saver -save to get file-saver then referenced it as follows (I have a gulp task to move the js file to libs directory and I see the file there)

in index.htmlI have included the script in src and 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

here it is not finding the fileSaver

import {SaveAs} from 'fileSaver';     

the error I get is this

 error TS2307: Cannot find module 'fileSaver'.   

Any idea what's wrong here ?

回答1:

In my case I made it work like this:

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"

usage:

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

You need to perform a npm install before running it.

That's it, hope it helps.

This won't let you import {SaveAs} from 'fileSaver'; nor have full code completion, but at least it works

回答2:

In installed the library and the typings (@types). Then,

import {saveAs} from 'file-saver';

worked. Additionally, I had to set the module format of file-saver to cjs explicitely in the System JS configuration:

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

As far as I understand SystemJS will recognize file-saver as AMD module by default. Maybe there is something wrong with the AMD module definition in file-saver, but I have not a very deep understanding of this. (See also https://github.com/eligrey/FileSaver.js/blob/master/FileSaver.js#L182)

Without setting cjs module format, I got "fileSaver.saveAs is not a function" at runtime.