I am currently attempting to integrate an Ionic2 app within a Movilizer HTML5 view. To facilitate communication between the Movilizer container client and the Ionic2 app, it is crucial to incorporate a plugins/Movilizer.js file. The functionality of this file will be replaced by the Movilizer system with a fully implemented version. Below is the content of the initial file:
//File location: src/plugins/Movilizer.js
var Movilizer = function() {};
Movilizer.prototype.readGlobalVariable = function(varName, successCB, errorCB)
{
result = "Hello World";
successCB(result);
}
var movilizer = new Movilizer();
In order to utilize the Movilizer interface in my TypeScript code, I understand that creating a Movilizer.d.ts definition file is necessary. However, I am encountering difficulties in this process. The following approach was attempted:
//File location: src/plugins/Movilizer/index.d.ts
//Also attempted at: src/plugins/Movilizer.d.ts
export = Movilizer;
declare class Movilizer {
constructor();
readGlobalVariable(key: string, onSuccess: (value: string) => void, onError: () => void): void;
}
Additionally, I attempted to reference the .d.ts file within my tsconfig.json without any observed changes:
//File location: tsconfig.json
(...)
"files": [
"src/plugins/Movilizer/index.d.ts"
],
(...)
The usage of the file within my FooPage TypeScript file looks like this and successfully compiles:
//File location: src/pages/foo/foo.ts
import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import Movilizer from '../../plugins/Movilizer';
@Component({
selector: 'page-foo',
templateUrl: 'foo.html'
})
export class FooPage {
constructor(public navCtrl: NavController) {
new Movilizer().readGlobalVariable("myGlobalVariable", (result) => {
console.log('readGlobalVariable Success: ' + result);
}, () => {
console.log('readGlobalVariable Failure!');
});
}
}
During testing of the application using the command $ ionic serve, an immediate crash occurs with the subsequent error message:
EXCEPTION: Error in ./FooPage class FooPage_Host - inline template:0:0 caused by: __WEBPACK_IMPORTED_MODULE_2__plugins_Movilizer___default.a is not a constructor
ErrorHandler.prototype.handleError
_callAndReportToErrorHandler/<
sg</d</t.prototype.invoke
NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvoke
sg</d</t.prototype.invoke
sg</v</e.prototype.run
h/<
sg</d</t.prototype.invokeTask
NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvokeTask
sg</d</t.prototype.invokeTask
sg</v</e.prototype.runTask
i
mh/</u
mh/<
Vl/r
My Inquiry
How can I effectively implement the Movilizer.js file into my TypeScript files? Should I create a .d.ts file, what is the correct procedure for doing so?