14

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

I have a button to export some data to a CSV file. When the page first loads I get an error message "Cannot find module 'file-saver'", but when I click the button everything works perfectly.

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 resolve this error?

gamelover42
  • 355
  • 1
  • 3
  • 15
  • I am fairly certain that the problem lies in the disparity of the names, the library is named "file-saver" and the .d.ts is named "@types/filesaver". If I manually rename the folder under @types from "filesaver" to "file-saver" the error goes away – gamelover42 Sep 26 '16 at 17:44
  • I'm still getting can't find module error, even after changing the @types/filesaver to @types/file-saver – jerryh91 Oct 03 '16 at 22:10

6 Answers6

18

just use this import statment

import * as fileSaver from 'file-saver';
Andre Passos
  • 189
  • 1
  • 4
  • Thank you... it really worked, but how ? in your solution we will use fileSaver.saveAs() but why can't it directly import save from file-saver. – Kanad Chourasia Jul 31 '18 at 20:53
  • This doesnt work for me. current line is like import * as FileSaver from 'file-saver'; Replacing this line not working for me. Only having issue while cloning code again. My current line works perfectly. – Avinash Dalvi Oct 21 '19 at 14:05
5

Install the Library as follows, 

npm install file-saver --save

This will solve your problem.

Parinda Rajapaksha
  • 2,963
  • 1
  • 36
  • 40
3

On angular-cli you should:

1) install the library to your node_modules:

npm i -S file-saver

2) add reference of js file on 'scripts' in angular-cli.json file:

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

3) on your typings.d.ts file :

declare function saveAs();

after that you can use saveAs() everywhere you need example:

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

Good Luck!

YairTawil
  • 3,961
  • 1
  • 22
  • 20
  • While it is working, I would not recommend importing file-saver in the whole project, "Andre Passos" way is cleaner – Flavien Volken Jun 01 '17 at 13:03
  • 1
    @FlavienVolken that's valid only when the js library has type definition to be imported. Some libraries don't use the export modules and cannot be used in that way, thus requiring to be imported globally. Having said that, file-saver does have types and therefore, it is better to be imported using the import syntax. – n4nd0_o Jun 02 '17 at 06:02
2

Install npm @types package

npm i --save-dev @types/file-saver

from https://stackoverflow.com/a/39261890/403999

@types is the new way to install the definitions in typescript 2.0

Juan Rojas
  • 8,711
  • 1
  • 22
  • 30
1

This is an old post but incase you have this error while upgrading to angular 10, change import statement to,

import { saveAs } from 'file-saver';

old import,

import { saveAs } from 'file-saver/FileSaver';
Prasool
  • 41
  • 4
  • my import was: `import { saveAs } from 'File-Saver'`. After this advisory I came onw step forward. +1 – Maik Jun 21 '23 at 10:01
-2

Install the new TypeScript 2 version.. that should work..

Gregor Biswanger
  • 529
  • 3
  • 16