Angular2 FileSaver.js - Cannot find file manager module

Question

I am working on moving the angular 1.x site to the new angular 2.0 site that I created on the site using angular-cli 1.0.0-beta.15.

I have a button for exporting some data to a CSV file. When the first page loads, I get the error message "Unable to find the module's file-keeper", but when I click the button, everything works fine.

I have the FileSaver.js component installed:

package.json

... "dependencies": { ... "@types/filesaver": "0.0.30", "file-saver": "^1.3.2" ... } ... 

in my export.service.ts:

 import { saveAs } from 'file-saver'; ... let file = new Blob(['hello world'], { type: 'text/csv;charset=utf-8' }); saveAs(file, 'helloworld.csv'); ... 

Does anyone know how to solve this error?

Answer 1

Install the new version of TypeScript 2. This should work.

Answer 2

just use this import status

 import * as fileSaver from 'file-saver'; 

Answer 3

In angular-cli you should:

1) install the library on node_modules:

 npm i -S file-saver 

2) add the js file link to the "scripts" in the angular-cli.json file:

 "scripts": ["../node_modules/file-saver/FileSaver.js"] 

3) in the typings.d.ts file:

 declare function saveAs(); 

after that you can use saveAs () wherever you need an example:

 export class MyClass{ constructor(){ saveAs(blablabla...) } } 

Good luck

Answer 4

Install the library as follows

 npm install file-saver --save 

This will solve your problem.