User 3rd party library with angular 2 and angular CLI

Question

I am struggling to find any information in relation to the steps required to get a 3rd party library to work.

Specifically, I am talking about 3rd party library that is in .js file that provides simple functionality such as some data manipulation

When clicked on the official angular cli 3rd party installation guide link, it just direct you to the home page of angular cli github page which doesn't help.

For example, using FileSaver as an example, this is how I got it to work with a hack way

npm install filesaver.js
change the folder name to filesaver instead of filesave.js because IDE does think it is a file
Create a new file under node_modules/@types/filesaver/index.d.ts and comment out everything and put in

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

As this frame work is outdated I had to hack it this way

import * as fireSaver from 'filesaver'

There is a problem with this approach. I shouldn't be modifying what is inside node Module as the content will disappear if I run npm install on a new project. I should be able to create my d.ts file in the src folder and somehow use it.

Also I dont think d.ts is mandatory to get the app to work. However, without modifying this d.ts file I could not get the app to work. Weird?

This all seems messy and I can't find any information in relation on how to get a simple js file going.

Even Angular Cli 3rd party offical is outdated and talks about system js.

Tiep Phan · Accepted Answer · 2017-02-13 04:42:53Z

2

for your lib, using following package instead:

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

in component:

import * as FileSaver from 'file-saver';

i have another approach to integrate 3rd party like filesaver.js with Angular CLI:

npm install filesaver.js --save

add the lib in "scripts" section in angular-cli.json file:

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

in component:

declare const FileSaver: any;

usage:

FileSaver.saveAs()

search your package and types first: https://www.npmjs.com/

edited Feb 13, 2017 at 4:42

answered Feb 13, 2017 at 3:40

Tiep Phan

12.6k3 gold badges40 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ErnieKev Over a year ago

Hi Tiep, Thanks. I am going through your first option. After I import * as FireSaver from 'file-saver', I tried to call FileSaver.saveAs() but it is giving me an error saying "FileSaver only refers to a type but is being used as a value here" Cheers

ErnieKev Over a year ago

And if I do saveAs(blob, 'hello world.csv') I get an error saying saveAs is not defined. Event though if I command click saveAs (mac), I get re-directed to index.d.ts from the @types folder

Tiep Phan Over a year ago

try remove all other filesaverjs version, only file-saver and @types/file-saver. p/s this lib work fine on my app: imgur.com/a/QfbsX

ErnieKev Over a year ago

It is working now! You are a hero man! Thanks alot. Quick question, my initial problem was because I was running npm install filesaver.js. Which caused me so much pain. How did you know this one was the right one that works. Or did you go through the pain as well? Thanks again

Tiep Phan Over a year ago

i'm searching first in npmjs.com, in the right side bar, you could see github repo, click to view repo detail, if this repo fork from other repo, maybe other repo it better one

Collectives™ on Stack Overflow

User 3rd party library with angular 2 and angular CLI

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related