Problem using js file in typescript project. Angular CLI

Question

I found a great github project and I was hoping to use it in my project. I'm sure I'm going to run into this problem again. So I'm really hoping I can get help on this. The project is located in the URL: https://github.com/lokesh/color-thief. I am trying to import the js file color-thief.js into my project and use it in a TS file or component. I added the file to my scripts[] in the angular.json file. Yet I'm still running into problems accessing the method getColor(). I am using intelliJ. I can't get the intellisense or code-completion to work. Which is furthermore making me think I'm not importing the file correctly.

Here is my ts file.

declare var ColorThief: any;

The path to get to the js file is

'../../js/color-thief.js'

Environmental setup is a nightmare.

use console.log(ColorThief) to see if it's properly imported. Your problem is with intellisense not with angular. — Yoarthur
– Yoarthur, Commented Dec 18, 2018 at 16:11
I just want to reproduce what lokesh is doing in his readme.md file on github :| — Nov
– Nov, Commented Dec 18, 2018 at 16:23

Yoarthur · Accepted Answer · 2018-12-18 16:48:16Z

1

Make sure that in your angular.json file, the script property set something like this.

"scripts": [
  "node_modules/[packageName]/js/color-thief.js",
],

remember to set node_modules and in the script, and import the proper .js file when that global variable is defined.

As far as i can see you need to create that object, according to color-thief package. Like this.

 let colorThief = new ColorThief();

edited Dec 18, 2018 at 16:48

answered Dec 18, 2018 at 16:32

Yoarthur

9179 silver badges20 bronze badges

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

5 Comments

Nov Over a year ago

So originally I just installed the file "color-thief.js". This time I npm installed the git project. And used your suggestion. Now when typing console.log(ColorThief) I get f(){}. So it seems it is sort of working? But, now I'm receiving the error that getColor is undefined.

Yoarthur Over a year ago

Now you're properly importing. I've edited the answer. It seems you need to create ColorThief object

Nov Over a year ago

idk... now I'm getting this error: ERROR TypeError: _js_color_thief_js__WEBPACK_IMPORTED_MODULE_8___default.a is not a constructor

Nov Over a year ago

Honestly, I'm sure there's a solution. But, I switched to a different git project that has a better readme and seems to have a bigger following. stackoverflow.com/questions/50909276/… node-vibrant

Yoarthur Over a year ago

let me test it.

Collectives™ on Stack Overflow

Problem using js file in typescript project. Angular CLI

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related