Angular2 FileSaver.js - 找不到模块 'file-saver'。

Question

我正在将一个Angular 1.x网站迁移到我使用angular-cli 1.0.0-beta.15创建的新Angular 2.0网站。 我有一个按钮，可以将一些数据导出到CSV文件。 当页面首次加载时，会收到错误消息“找不到模块'file-saver'”，但当我点击该按钮时，一切都正常工作。 我已安装了FileSaver.js组件：

package.json

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

在我的 export.service.ts 文件中:

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

有人知道如何解决这个错误吗？

- gamelover42

---

我相当确定问题在于名称的不一致，库的名称是"file-saver"，而.d.ts文件的名称是"@types/filesaver"。如果我手动将@types文件夹中的"filesaver"重命名为"file-saver"，错误就会消失。 - gamelover42

即使我将@types/filesaver更改为@types/file-saver，仍然出现找不到模块错误。 - jerryh91

Answer 1

只需使用此导入语句

import * as fileSaver from 'file-saver';

- Andre Passos

---

谢谢，它确实起作用了，但是为什么？在你的解决方案中，我们将使用fileSaver.saveAs()，但为什么不能直接从file-saver导入save？ - Kanad Chourasia

这对我不起作用。当前行类似于import * as FileSaver from 'file-saver';替换此行对我无效。只有在再次克隆代码时才会出现问题。我的当前行完美运行。 - Avinash Dalvi

Answer 2

按照以下方式安装库：

npm install file-saver --save

这将解决您的问题。

- Parinda Rajapaksha

Answer 3

在 Angular CLI 中，您应该：

1）将库安装到您的 node_modules 目录中：

npm i -S file-saver

2) 在 angular-cli.json 文件的 'scripts' 中添加 js 文件的引用：

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

3) 在你的typings.d.ts文件中：

declare function saveAs();

之后你可以在任何需要的地方使用saveAs()，例如：

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

祝你好运！

- YairTawil

---

虽然它能工作，但我不建议在整个项目中导入文件保存器，“Andre Passos”的方法更加简洁。 - Flavien Volken

@FlavienVolken 这仅在js库具有要导入的类型定义时才有效。一些库不使用导出模块，因此不能以这种方式使用，因此需要全局导入。 话虽如此，file-saver确实具有类型，因此最好使用import语法进行导入。 - n4nd0_o

Answer 4

安装npm @types包。

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

来自https://dev59.com/MlkS5IYBdhLWcg3w8ai-#39261890：

@types是在TypeScript 2.0中安装定义的新方法。

- Juan Rojas

Answer 5

这是一篇旧文章，但如果您在升级到Angular 10时遇到此错误，请将导入语句更改为：

import { saveAs } from 'file-saver';

旧的导入方式，

import { saveAs } from 'file-saver/FileSaver';

- Prasool

---

我的导入是: import { saveAs } from 'File-Saver'。在这个建议之后，我向前迈进了一步。+1 - Maik

Answer 6

安装新的TypeScript 2版本...应该能正常工作。

- Gregor Biswanger

---

你的编辑器支持TypeScript 2吗？ - Gregor Biswanger

是的，我正在使用Visual Studio Code 1.5.3。一旦我删除了.vscode文件夹并重新打开Code，问题就消失了。我想知道它是否被卡住了。 - gamelover42