0

I've just joined an angular 5 project (new to the tech). I need to use functions from an external javascript file.

I found some information here : How to include external js file in Angular 4 and call function from angular to js

But it doesn't work. What am I doing wrong ?

  1. I added my js file in the project and declared it in the .angular-cli.json : "scripts": [ "./assets/js/kia.js" ],

  2. Then I declared it in the typings.d.ts : declare var kia: any;

  3. And finally I tryed to import it in the file I use detail.component.ts : import * as variable from 'kia';

I've the error : error TS2307: Cannot find module 'kia'.

Anyone knows how to fix this ?

Poncelin Juriaan
  • 11
  • 3
  • In my **component.ts**, I've changed the import for: `import * as kia from '../../assets/js/kia.js';` And I added `"allowJs": true,` in the **tsconfig.json** compilerOptions. Now I've the error : `src/typings.d.ts(3,13): error TS2403: Subsequent variable declarations must have the same type. Variable 'kia' must be of type '{ COMMANDE_INIT: string; COMMANDE_EXECUTER_CALLBACK: string; ACQUITTER_: string; m_NomFenetre: an...', but here has type 'any'.` – Poncelin Juriaan May 29 '18 at 10:01

2 Answers2

0

You can include it in your index.html as you would normally (inside a script tag) and if necessary add the type definitions in your typings.d.ts or preferably, find a @types package for it.

Otherwise you can do what you are doing. Just ensure you path is correct and then since you've added it to your typings file you do not need to import it at the top of your ts file, you can just reference it like.

const a = kia. ...

If you've installed it using an npm package then you should rather import it, as you are doing

Matthew Mullin
  • 7,116
  • 4
  • 21
  • 35
  • It's a homemade cross application js file, I can't use npm. I've some trouble understanding how he can find the js file from what little I wrote in **typings.d.ts**. So I should remove the import and use it directly in my component ? – Poncelin Juriaan May 29 '18 at 09:00
  • @PoncelinJuriaan Have you tried removing the import at the top of your ts file and referenced what you need by just using the kia var you've declared. For example if foo is a function in kia, you can access foo by going kia.foo() anywhere in you project – Matthew Mullin May 29 '18 at 10:12
  • If I remove the import in the ts file I don't have any errors anymore, but It doesn't look like it's working. in the html componant I added : `` I get in chrome `Uncaught TypeError: kia.test is not a function at HTMLButtonElement.onclick`. When I browse the sources in chrome I can't find my kia.js, i did find the code in "scripts.bundle.js" though. – Poncelin Juriaan May 29 '18 at 12:11
  • @PoncelinJuriaan You should try it with Angular's built in (click) event handler. So its – Matthew Mullin May 29 '18 at 12:55
  • Thanks we're getting closer =). But now i've this in the log : ERROR TypeError: Cannot read property 'test' of undefined at Object.eval [as handleEvent] (DetailComponent.html:86) at handleEvent (core.js:13547) at callWithDebugContext (core.js:15056) at Object.debugHandleEvent [as handleEvent] (core.js:14643) at dispatchEvent (core.js:9962) at eval (core.js:10587) at HTMLButtonElement.eval (platform-browser.js:2628) at ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4740) at ZoneDelegate.invokeTask (zone.js:420) – Poncelin Juriaan May 29 '18 at 14:08
  • Test is an available method though. If I create a index.html where I import the js in a script balise it works fine. – Poncelin Juriaan May 29 '18 at 14:09
0

I solved this probleme by removing the import in the component.ts, then add a link method(); in the component.html, and declaring method() { kia.test();} in the componant.ts.

Poncelin Juriaan
  • 11
  • 3