How to call a function from an JS library?

Ionic Framework ionic-v3
1

FYI - no category here for Ionic 4. This question is re: Ionic 4.

I have a JS library (jdrupal) that i need to use in my app. It is available via npm but doesn’t have any .ts files associated with it. It is also does not define any classes; just simple js functions. The JS lib does define a JSON object (Drupal) to hold config variables.

In my .page.ts i have added this:

import * as jdrupal from ‘jdrupal’;
declare var Drupal: any;

then in my ngOnInit i have this:

ngOnInit() {
Drupal.settings.site_path = ‘http://example.org’;
Drupal.settings.endpoint = ‘rest’;
this.initDrupal();
this.userLogin();
}

this seems to work fine. The 2 function calls refer to functions i wrote in the class for this page, one of them is this:

initDrupal() {
system_connect({
success: function(result) {

    // Prepare a message for the user.
    const text = result.user.uid === 0 ? 'Hello World' : 'Hello ' + result.user.name;

    // Show the message in the paragraph.
    document.getElementById('msg').innerHTML = text;

  }
});

}

In my IDE, the function “system_connect” (which is from my lib) shows as red, stating the name cannot be found. I figured this was just a setting in my IDE as the app runs as expected.

However, if i restart ionic serve i get this error (for both the function calls):

ERROR in src/app/pages/drupal-test/drupal-test.page.ts(23,5): error TS2304: Cannot find name ‘system_connect’.

I am assuming i am still missing something in allowing my app to use/see my JS lib properly.

2

I had to change a few things to get this working.

  1. import command doesn’t work
    import * as jdrupal from ‘jdrupal’; → instead i had to add this to angular.json under projects → app → architect → build → options → scripts:

“node_modules/jdrupal/jdrupal.js”

  1. then in page.ts i need to declare and var or function used from the lib (ughh!!)

declare var Drupal: any;
declare var drupal_init: any;
declare var user_login: any;

this now works and does not cause errors in IDE or when trying to rerun ionic serve

ngOnInit() {
this.initDrupal();
Drupal.settings.site_path = ‘http://example.org’;
Drupal.settings.endpoint = ‘rest’;
this.userLogin();
}

initDrupal() {
drupal_init();
}

userLogin() {
user_login(‘qleva-admin’, ‘qpoiqpoi’, {
success: function(result) {
document.getElementById(‘useremail’).innerHTML = result.user.mail;
},
error: function(xhr, status, message) {
alert(message);
}
});
}

3

Method Reuse

With the call() method, you can write a method that can be used on different objects.

All Functions are Methods

In JavaScript, all functions are object methods.

If a function is not a method of a JavaScript object, it is a function of the global object (see the previous chapter).

The example below creates an object with 3 properties, firstName, lastName, fullName.

Example

var person = {
firstName:“John”,
lastName: “Doe”,
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
person.fullName(); // Will return “John Doe”

The this Keyword.

In a function definition, this refers to the “owner” of the function.

In the example above, this is the person object that “owns” the fullName function.

In other words, this.firstName means the firstName property of this object.

:- The JavaScript call() Method

The call() method is a predefined JavaScript method.

It can be used to invoke (call) a method with an owner object as an argument (parameter).

With call(), an object can use a method belonging to another object.