Angular2 - Importing 3rd party javascript in SystemJS

Question

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 ?

Answer 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