angular4 how to call a function in a external js

Question

I have a jscript which displays a log to the console:

x.js contains

function open() {
    console.log('this a function');
}

in index.html of my app

<script src="x.js"></script>

in my component

declare var xJS : any;;

@Component({
   selector: 'employerfile',
   templateUrl: './employerfile.component.html'
})

export class EmployerFileComponent
    .....
    openURL() {
       xJS.open();  
    }
}

in html

<a (click)="openURL()"> click </a>

When I execute this code, I get an exception@

Original exception: xJS is not defined

How can I call this external function?

Hristo Eftimov · Accepted Answer · 2017-06-19 06:34:46Z

6

Importing your file like this <script src="x.js"></script> will not work.

You have to import it in the following way:

import * as xJS from './x.js';

If it will not work, the alternative way is to use System.import:

declare var System: any; 

System.import('./x.js')
    .then(xJS => {
        xJS.open();
    });

You can check the following SO post.

answered Jun 19, 2017 at 6:34

Hristo Eftimov

16.3k14 gold badges55 silver badges80 bronze badges

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

4 Comments

Florence Over a year ago

i have this error error_handler.js:50 EXCEPTION: Uncaught (in promise): TypeError: xJS.open is not a function

Hristo Eftimov Over a year ago

Can you make your external file as a module and to export your function: export default function open(){ .... }

Ghizlane Lotfi Over a year ago

I have the same issue, but the difference is the js I am including, is in the website and not local https://chggtt.gt/Critgtek/cfr.cerfritek.js so any solution for this ?

Hristo Eftimov Over a year ago

@GhizlaneLotfi I have never faced with an issue with an external link. Maybe this post can help you stackoverflow.com/q/34607252/2765346 Good luck :)

Karan Hudia · Accepted Answer · 2017-06-19 07:13:33Z

5

You have to declare the name of the function you want to use in your angular component, as-

declare var open: any;

This basically tells the compiler that open exists somewhere, which will be then found in your js file.

Also, to use the above method in your component, you will have to use this syntax-

anyCustomMethodName/anyLifeCycleMethod() {
    new open();
}

edited Jun 19, 2017 at 7:13

answered Jun 19, 2017 at 7:00

Karan Hudia

5733 silver badges20 bronze badges

3 Comments

Rich Over a year ago

what if you want to store the return value from the open() function?

The Outstanding Question Asker Over a year ago

When I tried your answer, I got "Modifiers can'tappear here" error.

The Outstanding Question Asker Over a year ago

What worked for me is I put let open: any; and then ignore the lintrule to put const , instead of let. Keep it as let. Without the 'declare' word.

borkovski · Accepted Answer · 2017-06-19 06:15:02Z

1

You should first import it like this:

import * as xJS from 'xJS';

answered Jun 19, 2017 at 6:15

borkovski

9788 silver badges12 bronze badges

1 Comment

Florence Over a year ago

I have this compile error ERROR in C:/....app.component.ts (15,28): File 'C:/....js/x.js' is not a module.

Shivang Gupta · Accepted Answer · 2018-09-17 17:23:43Z

1

If your x.js file is not on your local machine or hosted on CDN or it is third-party library then you can't import it in above ways. Even System.import is deprecated.

You can add your js file into index.html and call its functions using window global object as we do earlier.

answered Sep 17, 2018 at 17:23

Shivang Gupta

3,3791 gold badge28 silver badges25 bronze badges

Collectives™ on Stack Overflow

angular4 how to call a function in a external js

4 Answers 4

4 Comments

3 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

3 Comments

1 Comment

Comments

Linked

Related