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

• How can i import external js file in Angular 5?
• How to include external js file in Angular 4 and call function from angular to js

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

Answer 1

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();
   }

Answer 2

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);
}

Answer 3

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

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();

Answer 4

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.

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