獲取外部JS庫爲Angular 2工作

Question

我努力讓FileSaver在我的項目中工作。這裏是確切的一步，我花了

1. NPM安裝filesaver.js --save

2. 內app.component.ts

進口*爲FileSaver從「filesaver。 JS';

然後我得到這個錯誤

找不到模塊 'filesaver.js'。

我也試圖添加以下到我的角cli.json文件

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

This的是，我能找到，可以幫助最接近的一次。然而，這個人和我有不同的設置。有一個簡單的方法來使用這個文件嗎？

請注意，從npm安裝FileSaver後，在我的節點模塊中，我得到filesaver.js文件夾（不知道爲什麼他們有.js作爲文件夾名稱）。此文件夾中，我得到FileSaver.js和FileSaver.min.js

我也曾嘗試

進口*爲FileSaver從 'filesaver.js/FileSaver.min.js';

但是，這只是給了我

找不到模塊 'filesaver.js/FileSaver.min.js'。）

----更新---

我也試過typings file這個via

npm i @types/filesaver 

，結果是一樣的

---- -----更新

這是我如何得到它的工作。

添加@ types/filesaver並添加了以下代碼。

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

注意。我在修改node_module文件中的內容是不好的。這意味着每次用戶運行npm install時，自定義代碼都不會在那裏。如何解決它？

從npm下載的默認文件夾名是filesaver.js。我將其更改爲filesaver。他們爲什麼會把它命名爲。JS，程序似乎有麻煩識別出它是一個文件夾

然後導入*爲filesaver從「filesaver」

然後我可以叫

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

-----文件夾結構 - ---

角-CLI：1.0.0-beta.26節點：6.9.1 OS：達爾文64 @角/共同：2.4.5 @角/編譯器：2.4.5 @角/芯：2.4.5 @ angular/forms：2.4.5 @a ngular/HTTP：2.4.5 @角/材料： 2.0.0-beta.1 @角/平臺的瀏覽器：2.4.5 @角/平臺的瀏覽器的動態：2.4.5 @角/路由器：3.4.5 @角/編譯器CLI：2.4.5

Answer 1

添加到角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，其通過添加角度-CLI所以它必須是在你的SRC文件夾中的項目內。
2. 當您在角cli.json在部分腳本添加，那麼所有的腳本將在頁面加載啓動。這就是爲什麼它的重要的是你從node_modules包括腳本，像你這樣「../node_modules/filesaver.js/FileSaver.min.js」。並用--save標誌補充包，像你一樣，所以任何時候的文件夾被刪除，你叫NPM安裝腳本將在地方。 3.