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 ?

see this [related Quetion](http://stackoverflow.com/questions/37082601/how-to-import-a-barrel-by-folder-name-only). — Ankit Singh, Jun 17 '16 at 08:11
Why would angular2-jwt work and not the other one ? This is strange.. Is it looking for some additional file in file-saver which it cannot find ? — user2180794, Jun 17 '16 at 16:50
Did you resolve this?? I am using FileSaver but I'm using it with Webpack, not SystemJS, sorry — Spock, Jun 20 '16 at 08:32
Not the way I wanted it to .. but by doing this I could use saveAs `declare var saveAs: any;` in the component. — user2180794, Jun 20 '16 at 08:33
@TechnoCracker Just outside my my component definition I just import it: "let fileSaver = require('filesaver.js');" — Spock, Jul 26 '16 at 12:22

Sergio · Answer 1 · 2016-07-03T11:01:04.730

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

I found this helpful as well: https://github.com/angular/angular-cli#3rd-party-library-installation — Jeff, Oct 26 '16 at 20:56

score 0 · Answer 2 · answered Jan 28 '17 at 09:55

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.

Angular2 - Importing 3rd party javascript in SystemJS

2 Answers2

Linked