Search code examples
javascriptangularfunctionexternal

angular4 how to call a function in a external js

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?

Solution

  • 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.