How cordova plugins work in ionic 2?

Ionic Framework ionic-v3
1

I asked a question yesterday regarding the usage of cordova plugins. I solved the problem by creating my project from scratch. But when I add a new plugin again. The new plugin doesn’t work although the old plugin still work. Here are my steps:

  • Create a new project

ionic start myproject blank --v2

  • Add the social share plugin

cordova plugin add cordova-plugin-x-socialsharing

  • Add my code related to social sharing and build it for ios

ionic platform add ios
cordova prepare
cordova build ios

  • Run xcode in my device. It works well
  • Add a new plug for InAppBrowser

cordova plugin add cordova-plugin-inappbrowser

  • Add my code related to InAppBrowser and build

cordova prepare
cordova build ios

Then I got an error message like:

ORIGINAL EXCEPTION: TypeError: undefined is not an object (evaluating ‘ionic_1.cordova.InAppBrowser’)

But my social share plugin still work!!! It looks like the new plugin is not hooked up to my project at all.

If I start a new project and add plugin for InAppBrowser, everything is fine. So it’s not the problem of plugin itself. Can anybody help to explain how ionic 2 hook up the plugin to project? Why can’t add new plugin? Thanks.

2

It seems the ionic build ios command fixed the problem. It’s a bit confusing. There are different commands like:

cordova build ios
ionic build ios

3

Ionic is a framework on top of Cordova. If you’re using Ionic, you’re basically using Cordova. The Ionic build process will eventually call the Cordova build process, but it does other work as well. In general when working with Ionic you should use the Ionic versions of the commands strictly and just pretend the Cordova variants do not exist.

4

Hi,
I am having trouble using cordova plugins.
Trying to use cordova-plugin-ble-central GitHub - don/cordova-plugin-ble-central: Bluetooth Low Energy (BLE) Central plugin for Apache Cordova (aka PhoneGap)
I add the plugin with

ionic plugin add cordova-plugin-ble-central

I am not sure how I should be access the global variable “ble”

platform.ready().then(() => {
  ble.enable(
      function() {
        this.log = "Bluetooth is enabled";
      },
      function() {
          this.log = "The user did *not* enable Bluetooth";
      }
  );
});

}
}

I should mention that I am using a Ionic2 typescript project.

5

First, what kind of error?
Second, try using the build command when you install each plugin, it seems it has solved some issues for other plugin users.

6

@luchillo17 Got it working!! The function I was using was not available in IOS. After loading the pulgin the global ble is accessible just as it was described in the other thread using the camera. It would be nice to get the definitions working in typescript. I have been just declaring the global like this

declare var ble : any;

But you don’t get any of the functions or proprieties. When you define a interface in typescript with the same name as the global in the pulgin will it overwrite the variable?

7

What your looking for is a “.d.ts” or “type definitions” file. This may or may not be supplied by the source code author, otherwise will probably need to be hand-written.

2 Likes
8

How did you load globally the plugin? Can you share your controller code including imports? I think i’m dealing with the same issue with cordova-plugin-googlemaps, but i can’t figure out how to do it :confused:

9

I just installed the plugin using

ionic plugin add xxx

I didn’t need any import statements the global defined in plugin can now be used anywhere in the code.
This plugin looks a lot more complicated than the bluetooth one. I have not tried to use it so I am just guessing.
Try

ionic plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID=“YOUR_ANDROID_API_KEY_IS_HERE” --variable API_KEY_FOR_IOS=“YOUR_IOS_API_KEY_IS_HERE”

Then see if you get access to the plugin.google.maps variable. Keep in mind that your editor will have no idea about the variable and it will not exist until it’s been build and running on the particular device or maybe the simulator. Best of luck

10

Already installed it successfully, but the matter is that plugin is ‘undefined’, so I can’t do anything.

Thanks for the quick reply :slight_smile:

11

same for me, plugin is installed with proper API key, but values are showing undefined.

I get following error in ios console

ERROR: Plugin ‘GoogleMaps’ not found, or is not a CDVPlugin. Check your plugin mapping in config.xml.

btw would this plugin run in the browser with ionic serve?

12

Paste your code and I can maybe help you, I manage to get it working.

Nope, just in apps, remember that you setup your API Keys for a certain package name.

Use the following to access the plugin: window.plugin.google.maps