How to use methods from external js in Angular

Question

I need to call a function from external js file into my Angular component

I already go through the related question

My External JS (external.js)

var radius = 25;

function calculateRadius(pi) {
    let piValue = 3.14159;

    if(pi) {
        piValue = pi;
    }

    var result = piValue * radius * radius;
    console.log('Result: ', result);
}

function wrapperMethod(pi) {
    console.log('Hi, this is from wrapper method');
    calculateRadius(pi)
}

I added the said JS file in the angular.json under scripts block

"scripts": [
    "src/assets/external.js",
]

In the CircleComponent, I would like to call the method

import wrapperMethod from '../../src/assets/external.js';

@Component({
  selector: 'app-circle',
  templateUrl: './circle.component.html',
  styleUrls: ['./circle.component.css']
})
export class CircleComponent implements OnInit {
    constructor() { }

    ngOnInit() {
        wrapperMethod(3.14159);
    }
}

But its failing to call the method. Kindly assist me how to achieve this.

Note: The said methods as just an example methods, I want to implement this logic with the complex code file. The said question tells about typings.d.ts, but I don't know where is typings.d.ts in my Angular project. Kindly brief me regarding this. If the said question gives good solution means, why should I post this question.

Angular Structure (Created using Angular CLI)

I don't know where is typings.d.ts, could anyone please tell me where is typings.d.ts - which is mentioned in the said questions How to include external js file in Angular 4 and call function from angular to js

[How to include external js file in Angular 4 and call function from angular to js](https://stackoverflow.com/q/44817349/1417185) — Paritosh, Sep 20 '18 at 05:29
Possible duplicate of [How to include external js file in Angular 4 and call function from angular to js](https://stackoverflow.com/questions/44817349/how-to-include-external-js-file-in-angular-4-and-call-function-from-angular-to-j) — Paritosh, Sep 20 '18 at 05:30
if you have created your project using angular-cli, then it will be there under `src` folder — Paritosh, Sep 20 '18 at 05:47
@Paritosh I attached the snapshot of my Angular project structure for you reference. Kindly assist me. — Sreedharan, Sep 20 '18 at 06:04
@Paritosh are you there, could you please assist or just remove the duplicate tag in my question. — Sreedharan, Sep 20 '18 at 07:11
check my asnwer: https://stackoverflow.com/a/52420112/1417185 — Paritosh, Sep 20 '18 at 07:48

score 2 · Answer 1 · answered Sep 20 '18 at 06:29

2

You can follow this below steps

1) First add a reference of your external JS file for importing it to the component. 
   import * as wrapperMethods from '../../src/assets/external.js';

2) Now declare a "var" of the same name that your function has inside external JS.
   declare var wrapperMethods: any;

3) ngOninit(){
    wrapperMethods();
   }

answered Sep 20 '18 at 06:29

Suresh Kumar Ariya

9,516
1
18
27

I added the `var wrapperMethod: any;` statement just after the import statement. I'm getting the following errors `SyntaxError: export declarations may only appear at top level of a module` and `ERROR TypeError: "Object(...) is not a function"` – Sreedharan Sep 20 '18 at 06:39
have you added this 'declare var wrapperMethods: any;' above the angular Decorator code? – Suresh Kumar Ariya Sep 20 '18 at 08:49
YES... Just after the `import` statement and just above the `@Component()` statement. – Sreedharan Sep 20 '18 at 08:58

Samir Ghoneim · Answer 2 · 2018-09-20T07:41:34.877

0

put your external .js file under scripts in build

if still can not see methods inside it put in in index.html

<script src="assets/PATH_TO_YOUR_JS_FILE"></script>

in your component after import section

declare var FUNCTION_NAME: any;

ANY_FUNCTION() {
    FUNCTION_NAME(params);
}

edited Sep 20 '18 at 07:41

answered Sep 20 '18 at 07:31

Samir Ghoneim

591
1
6
14

score 0 · Answer 3 · answered Sep 20 '18 at 07:47

0

Don't get confused with typings.d.ts. Follow below steps.

1.Add your external file inside assets folder. The content of this file will be by default included as per your angular-cli.json.

2.The function of your js which you're going to use must be exported. i.e.

export function hello() {
    console.log('hi');
}

3.Import your file inside your component as below.

 import * as ext from '../assets/some-external.js';

4.Now you can reference it like

ext.hello();

answered Sep 20 '18 at 07:47

Paritosh

11,144
5
56
74

I can't change a single code in the external js, I'm having only privilege to write whatever in my file, I can consume the external file but I can't change the content. i.e., I can't add the `export` keyword in front of the function. – Sreedharan Sep 20 '18 at 09:42

score 0 · Answer 4 · answered Sep 30 '21 at 05:55

Steps:-
1. create a external js file. 
2. In component.ts use the below code.

ngOnInit() {  
  this.loadJsFile(JsFilePath);  
}  
public loadJsFile(url) {  
  let node = document.createElement('script');  
  node.src = url;  
  node.type = 'text/javascript';  
  document.getElementsByTagName('head')[0].appendChild(node);  
} 

3. If u use jquery then define selector in html to render. Or store data in variable.

Make sure you have to add jquery cdn in index.html and you have to install Jquery and its types package from npm.

How to use methods from external js in Angular

4 Answers4

Linked