title: Get external JS library to work for Angular 2
body: <p>I am struggling to get <a href="https://www.npmjs.com/package/filesaver.js" rel="nofollow noreferrer">FileSaver</a> to work in my project. Here is the exact step I took</p>
  
  <ol>
  <li><p>npm install filesaver.js --save</p></li>
  <li><p>Inside app.component.ts</p></li>
  </ol>
  
  <blockquote>
    <p>import * as FileSaver from 'filesaver.js';</p>
  </blockquote>
  
  <p>Then I get this error </p>
  
  <blockquote>
    <p>Cannot find module 'filesaver.js'.</p>
  </blockquote>
  
  <p>I also tried to add the following to my angular-cli.json file</p>
  
  <pre><code>  "scripts": [
      "../node_modules/filesaver.js/FileSaver.min.js"
    ]
  </code></pre>
  
  <p><a href="https://github.com/angular/angular-cli/issues/999" rel="nofollow noreferrer">This</a> is the closest that I could find that may help. However, this guy has a different setup as me. There's got to be a simple way to use this file right?</p>
  
  <p>Note, after install FileSaver from npm, inside my node-module, I get filesaver.js folder (not sure why they have .js as folder name). Inside this folder, I get FileSaver.js and FileSaver.min.js</p>
  
  <p>I have also tried </p>
  
  <blockquote>
    <p>import * as FileSaver from 'filesaver.js/FileSaver.min.js';</p>
  </blockquote>
  
  <p>But that just gives me </p>
  
  <blockquote>
    <p>Cannot find module 'filesaver.js/FileSaver.min.js'.)</p>
  </blockquote>
  
  <p>----update---</p>
  
  <p>I have also tried <a href="https://www.npmjs.com/package/@types/filesaver" rel="nofollow noreferrer">typings file</a> for this via </p>
  
  <pre><code>npm i @types/filesaver
  </code></pre>
  
  <p>and the result is the same</p>
  
  <p>----update-----</p>
  
  <p>Here is how I got it to work. </p>
  
  <p>Added @types/filesaver and added the following code.</p>
  
  <pre><code>declare module 'filesaver' {
      var saveAs: any;
      export = saveAs;
  }
  </code></pre>
  
  <p>Note. Is it bad that I am modifying content inside my node_module file. This means that every time a user run npm install, the custom code will not be there. How to get around it?</p>
  
  <p>The default folder name downloaded from npm was filesaver.js. I changed it to filesaver. Why in the world would they name it as .js, the program seems to have trouble recognizing it as a folder</p>
  
  <p>then import * as filesaver from 'filesaver'</p>
  
  <p>then I can call</p>
  
  <pre><code>var blob = new Blob(['Some Content'], { type: "text/csv;charset=utf-8" });
  filesaver.saveAs(blob, "hello world.csv");
  </code></pre>
  
  <p>----- folder structure-----</p>
  
  <blockquote>
    <p>angular-cli: 1.0.0-beta.26 node: 6.9.1 os: darwin x64
    @angular/common: 2.4.5 @angular/compiler: 2.4.5 @angular/core: 2.4.5
    @angular/forms: 2.4.5 @angular/http: 2.4.5 @angular/material:
    2.0.0-beta.1 @angular/platform-browser: 2.4.5 @angular/platform-browser-dynamic: 2.4.5 @angular/router: 3.4.5
    @angular/compiler-cli: 2.4.5</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/g8Mj6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g8Mj6.png" alt="folder structure"></a></p>