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 ?

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
– user2180794, Commented Jun 17, 2016 at 16:50

Sergio · Accepted Answer · 2016-07-03 11:01:04Z

2

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

edited Jul 3, 2016 at 11:01

answered Jul 3, 2016 at 10:43

Sergio

3,3976 gold badges35 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jeff Over a year ago

I found this helpful as well: github.com/angular/angular-cli#3rd-party-library-installation

Stefan Ocke · Accepted Answer · 2017-01-28 09:55:48Z

0

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.

answered Jan 28, 2017 at 9:55

Stefan Ocke

2492 silver badges6 bronze badges

Collectives™ on Stack Overflow

Angular2 - Importing 3rd party javascript in SystemJS

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related