How to call an external JavaScript function in Ionic 2

Question

I have a JavaScript method in an external JS file. In an Ionic 2 project, I have to call some methods of AnyJS function from my home.ts. I have included the JS file inside a <script> tag in index.html. I have declared AnyJS like this declare var AnyJS: any; above @Component in my home.ts.

Now, while creating an object by using the new keyword in the constructor I'm getting the following reference error:

5 713568 error EXCEPTION: Error in ./HomePage class HomePage_Host - inline template:0:0 caused by: AnyJS is not defined 6 713570 error ORIGINAL EXCEPTION: AnyJS is not defined 8 713575 error ReferenceError: AnyJS is not defined

The Ionic version I'm using:

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: 1.8.3 
ios-sim version: 5.0.4 
OS: Mac OS X El Capitan
Node Version: v6.8.0
Xcode version: Xcode 8.0 Build version 8A218a

Here is the home.ts:

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

declare var AnyJS: any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

    private anyjs : any;
    private method : any;

    constructor(public navCtrl: NavController) {
        this.anyjs = new AnyJS();
        this.method = this.anyjs.methodCall();
    }

}

And, here is my AnyJS file:

function AnyJS(){}

AnyJS.prototype.methodCall = function() {
    console.log("Done!");
    return true;
};

Note: AnyJS file contains an object with some properties and methods which doesn't comply with the latest ES6 standards but plain JS methods. I need to create an object and call the methods directly from my home.ts.

Vassilis Pits · Accepted Answer · 2016-10-26 08:44:29Z

2

Change your AnyJs file to something like this:

export class AnyJs {

  public methodCall () {
    console.log('done');
    return true;
  }

}

Then in your home.ts file import it:

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { AnyJs } from './anyjs.ts'; // or the path of the file

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

    constructor(
      public navCtrl: NavController,
      public anyJs: AnyJs) {
        this.anyJs = anyJs; 
        // And then you can use it anywhere in your file like:
        this.anyJs.methodCall().success(data => console.log(data));
    }

}

Now if your AnyJs file is an ES6 file you have those options:

Declare a module and export the class to use:

declare module "foo" { export class Foo{ } }

Or Declare function as a module

export default function () { ... };


import myFunc from 'AnyJs';
myFunc();

edited Oct 26, 2016 at 8:44

answered Oct 26, 2016 at 8:34

Vassilis Pits

3,8484 gold badges35 silver badges49 bronze badges

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

7 Comments

Manu Gupta Over a year ago

Thanks for your help. But, do I need to rewrite the functions in the external js in TypeScript? Is there any other solution for importing my js file as it is without rewriting in TypeScript?

Vassilis Pits Over a year ago

You can declare a module with es6: declare module "foo" { export class Foo{ } } for example.

Manu Gupta Over a year ago

Could be please explain this as well? Because I want to import my js file as it is without rewriting in TypeScript.

Manu Gupta Over a year ago

Thanks. I updated my question. So, basically I want to call the methods of AnyJS file directly from my home.ts. Is there any other alternative? If not, what would be the best approach?

Manu Gupta Over a year ago

Still getting the error: Cannot find name 'AnyJs'. constructor(public navCtrl: NavController, public anyJs: AnyJs) {

|

Collectives™ on Stack Overflow

How to call an external JavaScript function in Ionic 2

1 Answer 1

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Related