angular - 获取外部 JS 库以用于 Angular 2

Question

我正在努力获得 FileSaver在我的项目中工作。这是我采取的确切步骤

1. npm install filesaver.js --save

2. 在 app.component.ts 内部

import * as FileSaver from 'filesaver.js';

然后我得到这个错误

Cannot find module 'filesaver.js'.

我还尝试将以下内容添加到我的 angular-cli.json 文件中

  "scripts": [
    "../node_modules/filesaver.js/FileSaver.min.js"
  ]

This是我能找到的最接近的可能有帮助的。但是，这家伙的设置与我不同。一定有一个简单的方法来使用这个文件吧？

请注意，从 npm 安装 FileSaver 后，在我的节点模块中，我得到了 filesaver.js 文件夹(不知道为什么他们将 .js 作为文件夹名称)。在此文件夹中，我得到 FileSaver.js 和 FileSaver.min.js

我也试过

import * as FileSaver from 'filesaver.js/FileSaver.min.js';

但这只是给了我

Cannot find module 'filesaver.js/FileSaver.min.js'.)

----更新---

我也试过typings file为此通过

npm i @types/filesaver

结果是一样的

----更新-----

这是我如何让它工作的。

添加了@types/filesaver 并添加了以下代码。

declare module 'filesaver' {
    var saveAs: any;
    export = saveAs;
}

注意。我正在修改我的 node_module 文件中的内容是不是很糟糕。这意味着每次用户运行 npm install 时，自定义代码都不会出现。如何绕过它？

从 npm 下载的默认文件夹名称是 filesaver.js。我将其更改为文件保护程序。为什么他们会将其命名为 .js，该程序似乎无法将其识别为文件夹

然后从“文件保护程序”导入 * 作为文件保护程序

然后我可以打电话

var blob = new Blob(['Some Content'], { type: "text/csv;charset=utf-8" });
filesaver.saveAs(blob, "hello world.csv");

-----文件夹结构-----

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

Answer 1

添加到 angular-cli(你做的)

 "scripts": [
    "../node_modules/filesaver.js/FileSaver.min.js"
  ]

然后添加到src/typings.d.ts

declare function saveAs(data: Blob, filename: string)

现在您可以在没有任何导入的情况下使用此方法。

var blob = new Blob(['Some Content'], { type: "text/csv;charset=utf-8" });
saveAs(blob, "hello world.csv");

它是如何工作的。

1. 您不应该创建 typings.d.ts，它是由 angular-cli 添加的，因此它必须位于项目内的 src 文件夹中。
2. 当您在脚本部分添加 angular-cli.json 时，所有脚本都将在页面开始时加载。这就是为什么像“../node_modules/filesaver.js/FileSaver.min.js”那样包含来自 node_modules 的脚本很重要。并且包添加了 --save 标志，就像你所做的那样，所以任何时候文件夹被删除并且你调用 npm install 你的脚本都会到位。 3.