Custom plugin - Cannot read property 'plugin' of undefined

Ionic Framework ionic-v3
1

Hi,

I am creating a custom cordova plugin and trying to create a typescript definition.

The code works when I run it using the command below

ionic cordova run android

However, if I compile it with

ionic cordova build android --prod

I will get an error as per subject - Cannot read property ‘plugin’ of undefined. The undefined object it’s referring to is actually cordova object (e.g. cordova.plugin.MyPlugin).

Below is a sample of my typescript class

-- MyPlugin.ts

/**
 * This package requires Lodash, @angular/core and RXjs
 * */
import {Injectable} from "@angular/core";
import * as _ from 'lodash';
import {Observable} from "rxjs/Observable";
import {Subscriber} from "rxjs/Subscriber";

/**
 * @interface
 * */
export interface MyPluginInterface {
    /**
     * @param {string} phrase
     * @param {function} successCallback
     * @param {function} errorCallback
     * @return {void}
     * */
    echo (phrase:string, successCallback?:Function, errorCallback?:Function):never;
}
/**
 *
 * */
export declare var cordova : {
    plugin: {
        MyPlugin : MyPluginInterface
    }
};

/**
 * @constructor
 * */
@Injectable()
export class MyPlugin
{
    /**
     * Test echo
     *
     * @param {string} phrase
     * @return {Promise<any>}
     * */
    public static echo (phrase:string):Promise<any>
    {
        return new Promise((resolve, reject) => {

            try {
                cordova.plugin.MyPlugin.echo(phrase, (response:any) => resolve(response), (err:any) => reject(err));
            } catch (e) {
                reject(e);
            }
        });
    }
}

-- MyPlugin.js file

var exec = require('cordova/exec');

function MyPlugin() {}

MyPlugin.prototype.echo = function(content,success,error) {
    exec(
        success,
        error,
        "MyPlugin",//feature name
        "echo",//action
        [content]
    );
};
module.exports = new MyPlugin();

I took reference from here https://github.com/olaferlandsen/cordova-plugin-ftp/blob/master/types/ftp.ts. I am not sure if this is compatible with latest Ionic.

Also to add, I am using the same FTP plugin from the github link above and it returns similar issue too. Somehow after compiling with --prod, cordova not recognized. Do I need to include @Cordova for every method?

Is there any example I can refer to if the format above is incorrect?

Below is my ionic info

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.15.2
    ionic (Ionic CLI) : 3.15.2

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.7.1

System:

    Android SDK Tools : 25.2.5
    ios-deploy        : 1.9.1 
    ios-sim           : 3.1.1 
    Node              : v6.10.0
    npm               : 4.2.0 
    OS                : macOS Sierra
    Xcode             : Xcode 9.0.1 Build version 9A1004
2

I manage to fix the issue by changing

export declare var cordova : {
    plugin: {
        MyPlugin : MyPluginInterface
    }
};

to

declare var cordova:any;