How to use methods from external js in Angular

问题

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

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

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

回答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. 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();

来源：https://stackoverflow.com/questions/52418149/how-to-use-methods-from-external-js-in-angular

标签

javascript

angular

ecmascript-6

angular6