Получить внешнюю библиотеку JS для работы в Angular 2

Question

Я изо всех сил пытаюсь получить FileSaver для работы в моем проекте. Вот точный шаг, который я взял

1. НПМ установки filesaver.js --save

2. Внутри app.component.ts

импорт * в качестве FileSaver от «filesaver. JS';

Тогда я получаю эту ошибку

Не удается найти модуль 'filesaver.js'.

Я также попытался добавить следующее к моей угловой cli.json файл

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

This является самым близким, что я мог бы найти, что может помочь. Тем не менее, у этого парня есть другая установка, как и я. Должен быть простой способ правильно использовать этот файл?

Обратите внимание: после установки FileSaver из npm внутри моего узла-модуля я получаю папку filesaver.js (не знаю, почему у них есть .js в качестве имени папки). Внутри этой папки, я получаю FileSaver.js и FileSaver.min.js

Я также попытался

импорт * в качестве FileSaver от 'filesaver.js/FileSaver.min.js';

Но это просто дает мне

Не удается найти модуль '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, было fileaver.js. Я изменил его на файл. Почему в мире они назовут это.JS, программа, кажется, есть проблемы с распознаванием его как папку

затем импортировать * в filesaver из '' filesaver

то я могу назвать

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

----- папку structure-- ---

угловой кли: 1.0.0-beta.26 узел: 6.9.1 ОС: Darwin 64 @ угловой/общее: 2.4.5 @ угловой/компилятор: 2.4.5 @ угловая/сердцевина : 2.4.5 @ угловые/формы: 2.4.5 @a ngular/http: 2.4.5 @ angular/material: 2.0.0-beta.1 @ угловой/платформенный браузер: 2.4.5 @ угловой/платформенный браузер-динамик: 2.4.5 @ угловой/роутер: 3.4.5 @ угловой/составитель-кли: 2.4.5

Answer 1

Добавить в угловой кли (что вы делали)

"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. Когда вы добавляете скрипты в angular-cli.json в секции, все скрипты будут загружаться при старте страницы. Вот почему важно, чтобы вы включали скрипты от node_modules, как вы делали «../node_modules/filesaver.js/FileSaver.min.js». И пакет был добавлен с --save флаг, как и вы, поэтому любые временные папки удаляются, и вы называете npm install, ваши скрипты будут на месте. 3.