How do I include a JavaScript script file in Angular and call a function from that script?

Question

I have a JavaScript file called abc.js that has a 'public' function called xyz(). I want to call that function in my Angular project. How do I do that?

score 122 · Accepted Answer · edited May 18 '20 at 20:21

122

Refer the scripts inside the angular-cli.json (angular.json when using angular 6+) file.

"scripts": [
    "../path" 
 ];

then add in typings.d.ts (create this file in src if it does not already exist)

declare var variableName:any;

Import it in your file as

import * as variable from 'variableName';

edited May 18 '20 at 20:21

Philipp Meissner

4,644
4
29
53

answered Jun 29 '17 at 06:05

Aravind

38,787
15
88
108

10

i added path in scripts as "scripts": [ "./assets/common_header_sidebar.js" ]; then in typing.d.ts i wrote declare var commonHeader:any; and then in my ts file i wrote import * as commonHeaderModule from 'commonHeader'; but getting "Cannot find module 'commonHeader'." error – Piyush Jain Jun 29 '17 at 06:14
`commonHeader` must be the name of the object exported in the javascript file – Aravind Jun 29 '17 at 06:25
yes commonHeader is the function name that i have to export from the js file – Piyush Jain Jun 29 '17 at 06:28
12

i might sound silly for asking this. but how the file name in the path(declared in angular-cli.json) and declaring name of the object in typing.d.ts file is related. since i am importing from the name of the declared object not the file – Piyush Jain Jun 29 '17 at 06:39
2

can you create a `plunker` to reproduce – Aravind Jun 29 '17 at 06:40
will uploading the js file do the job ?? since i haven't created any plunker till now . so might take time in that – Piyush Jain Jun 29 '17 at 06:48
3

done with the integration it is just that i had to declare the function in my ts file where i was using it and import was not required. Thanks a ton . – Piyush Jain Jun 29 '17 at 07:05
Can I use online link in the script tag? Is there any way to use online **JS** file link to use in application? – Habib Oct 13 '17 at 07:48
you can use the script reference too – Aravind Oct 13 '17 at 10:56
@Ameya I didn''t understand your question – Aravind Apr 23 '18 at 12:01
We don't have to import once again if we declare the variable in typing.d.ts – Sudhir Sapkal Jul 17 '18 at 07:00
I could see plugin name in chrome console, but unable to import in ts file. – gauti Nov 19 '18 at 11:18
1

I don't have 'typings.d.ts' file in my project, so what should I do? – Habib Nov 27 '18 at 08:27
2

@Aravind what if I don't have typing.d.ts file in my Angular 4 project? – Habib Dec 03 '18 at 07:11
@HabibM.Farooq can you please share me your code and the steps you tried or try creating a new post if it is completely different from this post – Aravind Dec 03 '18 at 07:49
1

@Aravind well I was trying to add a js file and when I search for a typing.d.ts file I didn't find any. I create my project from Angular CLI "ng new appname" by this method. And everything is working fine but there is no typings.d.ts file in my project. Do I have to create it by myself or is it some problem or some error? – Habib Dec 03 '18 at 07:53
@ HabibM.Farooq you must create this file – PuntanetDeveloper Dec 13 '18 at 11:09
1

FYI angular-cli.json has been renamed to angular.json from angular 6+ – Howdy Aug 08 '19 at 19:16
Add a `typings.d.ts` file in your `src` folder if it does not already exist. – Ollie May 03 '20 at 04:36
Still has an error when trying to import it : "Cannot find module 'myVariableName' or its corresponding type declarations." – Neyt Mar 30 '22 at 13:06

score 43 · Answer 2 · edited May 18 '20 at 20:20

43

In order to include a global library, eg jquery.js file in the scripts array from angular-cli.json (angular.json when using angular 6+):

"scripts": [
  "../node_modules/jquery/dist/jquery.js"
]

After this, restart ng serve if it is already started.

edited May 18 '20 at 20:20

Philipp Meissner

4,644
4
29
53

answered Jun 29 '17 at 06:04

Rahul Singh

17,747
8
56
83

5

how do you import on the typescript file? – alansiqueira27 Oct 29 '18 at 20:47
2

to import in ts file use - `declare var $: any;` – ojus kulkarni Mar 28 '19 at 04:47
3

angular-cli.json file has been renamed/replaced with angular.json in version 6+ of Angular. – Ε Г И І И О Oct 29 '19 at 07:19
2

Either this isn't working in 2021 or there is a step missing – Chris Sprague May 02 '21 at 21:17
What else after adding the file to array? @alansiqueira27 good point – Sailab Rahi Jun 19 '21 at 12:31

score 39 · Answer 3 · edited May 21 '19 at 12:05

39

Add external js file in index.html.

<script src="./assets/vendors/myjs.js"></script>

Here's myjs.js file :

var myExtObject = (function() {

    return {
      func1: function() {
        alert('function 1 called');
      },
      func2: function() {
        alert('function 2 called');
      }
    }

})(myExtObject||{})


var webGlObject = (function() { 
    return { 
      init: function() { 
        alert('webGlObject initialized');
      } 
    } 
})(webGlObject||{})

Then declare it is in component like below

demo.component.ts

declare var myExtObject: any;
declare var webGlObject: any;

constructor(){
    webGlObject.init();
}

callFunction1() {
    myExtObject.func1();
}

callFunction2() {
    myExtObject.func2();
}

demo.component.html

<div>
    <p>click below buttons for function call</p>
    <button (click)="callFunction1()">Call Function 1</button>
    <button (click)="callFunction2()">Call Function 2</button>
</div>

It's working for me...

edited May 21 '19 at 12:05

barbsan

3,328
11
20
28

answered May 21 '19 at 11:56

Nagnath Mungade

743
7
9

4

Very thorough example thanks, it worked for me on angular 6. None of the other answers worked. – Daniel Filipe Dec 10 '19 at 23:08
2

Fwiw, [here are some explanations of what `declare` does](https://stackoverflow.com/q/35019987/1028230) -- essentially "_`declare` is used to tell TypeScript that the variable has been created elsewhere_" (from [this answer](https://stackoverflow.com/a/35020317/1028230)). – ruffin May 13 '20 at 15:29
1

I think the index.html file is empty by design and I think you should keep it that way. The ng serve should take care of all javascript files. – Herman Van Der Blom Aug 25 '20 at 13:38

score 20 · Answer 4 · answered Jun 29 '17 at 06:03

20

You can either

import * as abc from './abc';
abc.xyz();

or

import { xyz } from './abc';
xyz()

answered Jun 29 '17 at 06:03

crash

3,612
4
28
49

31

what am i supposed to do when the file is hosted somewhere but not in the local repo? – Piyush Jain Jun 29 '17 at 06:06
did you figure this out? – Luis Aceituno Feb 22 '18 at 16:30
1

Getting errors in both methods. Well I have a .js file in my project but when I import by first method its give me error in compiling and can't find any module when I use the second method. And I am just using slick slider. – Habib Nov 27 '18 at 08:30

score 0 · Answer 5 · answered Nov 14 '21 at 20:51

0

I resolved this issue by adding "allowJs": true within "compilerOptions" in tsconfig.json file!

answered Nov 14 '21 at 20:51

Aakash Goplani

837
1
15
29

How do I include a JavaScript script file in Angular and call a function from that script?

5 Answers5

Linked

Related