[2.0.0-rc.0] - Cannot use native plugins

[vlados]

After migrating to 2.0 RC0 I am unable to use native plugins. Example https://github.com/driftyco/ionic/issues/8261

[ihadeed]

I'll look into this soon, just finished upgrading an app to rc0. Will test the native plugins in a bit.

[ihadeed]

I think this issue is related to https://github.com/driftyco/ionic-native/issues/560

I'm having the same problem as you when the app starts up, but when I try to use plugins later on they work fine. But that's still strange because I wrap everything with platform.ready()...

Will investigate further and let you know if I find a solution.

Nevermind, I'm unable to reproduce the issue that you are having. My problem was because I actually didn't have the plugins installed.

[vlados]

Are you able to use native plugins ? How did you integrated it? Can you post simple code?

[mlynch]

@vlados try creating a new project w rc0 using ionic CLI to see a plugin or two being used

[danielgek]

tried and it says the plugin is not installed, even in a fresh project, but googlemaps plugin works, i use a few more and none of them works

[vlados]

@mlynch Yes, I've tried and some of the Plugins are working, some of them returns data wrapped in __zone_value key ... something is not right

[doender]

I am having the same issue

[jgw96]

Hello @vlados and @doender which plugins are you all having issues with specifically?

[doender]

With 'diagnostic', it's the first one I tried.

[ihadeed]

@doender can you share your code (that part where you're calling the plugin) and any error messages / stack traces?

I'm using the diagnostic plugin without any issues.

[mlynch]

I need specific plugins in order to assess this. I just tested a bunch and they work great. I suspect something else is going on here, perhaps an improperly configured build process with the move to RC.0's build?

Can anyone share a sample project I can look through? Closing as not reproducible

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Device, Splashscreen, GoogleAnalytics, Diagnostic } from 'ionic-native';

import { TabsPage } from '../pages/tabs/tabs';

@Component({
  template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
  rootPage = TabsPage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();

      Splashscreen.hide();

      let name = Device.device.uuid;

      GoogleAnalytics.debugMode();
      GoogleAnalytics.startTrackerWithId('UA-44023830-11');

      console.log('Device name', name);

      let successCallback = (isAvailable) => { console.log('Is available? ' + isAvailable); };
      let errorCallback = (e) => console.error(e);

      Diagnostic.isCameraAvailable().then(successCallback).catch(errorCallback);

      Diagnostic.isBluetoothAvailable().then(successCallback, errorCallback);

    });
  }
}

[baltazaroliveira]

Not Working. Give the same error!

Should unistall GA plugin?

Error

Thanks

[mlynch]

Okay, I think I see what's going on here. We're running into a separate issue with using the name field I believe.

Does it work if you do this:

platform.ready(() => {
  setTimeout(() => {
    Splashscreen.hide()

  }, 1000);
});

The setTimeout is there to test whether htis is just a race condition

[ihadeed]

Please update to ionic-native@latest

[doender]

My bad, I forgot to wrap the plugin in platform.ready...

[baltazaroliveira]

Updated to latest Ionic Native 2.1.6. Same error with the change suggested!

constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.

      // splash screen
      //Splashscreen.hide();

      if (Splashscreen) {
        setTimeout(() => {
          Splashscreen.hide();
        }, 1000);
      }

      // status bar
      StatusBar.styleDefault();

      //let name = Device.device.uuid;

      // GA
      //GoogleAnalytics.debugMode();
      GoogleAnalytics.startTrackerWithId("UA-17772329-16");

    });
  } // construtor

Please help to resolve this issue!

[mlynch]

Can one of you send me your main.js file from www/build/main.js? I think this is a build related issue where the classname is getting renamed. max@ionic.io

[baltazaroliveira]

In Attach! Thanks for your help! :-)

build.zip

[mlynch]

Hey, in your package.json for your RC0 app, can you try replacing build with this?

"build": "ionic-app-scripts build --dev",

Then try again and let me know if that works? I'm feeling like the prod build is removing metadata we're relying on for this to work.

[mlynch]

Can someone send me a project with this issue happening? The more I look at the code the more I'm thinking something else is going on, perhaps in your project or with the plugin (maybe it changed?). The console error might be broken but it shouldn't impact anything else because both the plugin window reference and the method name are still intact, and we don't use the name field for anything important.

[baltazaroliveira]

Updated Ionic Native to latest - 2.1.9 Changed the package.json

When run in chrome developer i get this.

Hope that helps to resolve this issue.

[ihadeed]

In the picture it looks like you're making the plugin call before deviceready is fired. Are you sure you're wrapping all your calls with platform.ready() ?

On Oct 10, 2016 6:27 AM, "baltazaroliveira" notifications@github.com wrote:

Updated Ionic Native to latest - 2.1.9 Changed the package.json

[image: image] https://cloud.githubusercontent.com/assets/953742/19233249/44f4951a-8edc-11e6-8f72-77c175468124.png

When run in chrome developer i get this.

[image: image] https://cloud.githubusercontent.com/assets/953742/19233268/641d2862-8edc-11e6-8fa4-458a804ee36c.png

Hope teat helps to resolve this issue.

— You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub https://github.com/driftyco/ionic-native/issues/602#issuecomment-252581501, or mute the thread https://github.com/notifications/unsubscribe-auth/ANJ8dF7wijoeJfkzzfwCilZWHd4pX8iGks5qyhL0gaJpZM4KJSVu .

[joubin-ca]

I'm experiencing the same issue however specifically with SQLite native-plugin. Here are a two things that I have done to see if they are the solution, to no avail:

1. Check the plugin list. It's listed: cordova-plugin-sqlite-2 1.0.4 "SQLitePlugin"
2. Updated package.json (as suggested here): "build": "ionic-app-scripts build --dev"

Anyone else has the same issue with the SQLite plugin?

[mlynch]

@joubin-ca @baltazaroliveira I'm at a loss. Can either one of you zip up and email me/dropbox/etc. your whole project? max AT ionic DOT io. That would be immensely appreciated!

[mlynch]

Also, can you try the suggestion here: https://github.com/driftyco/ionic-native/issues/651#issuecomment-252485648

Namely: ionic state reset and then rm -rf node_modules/ then npm install

[joubin-ca]

@mlynch - I did the following _ionic state reset and then rm -rf nodemodules/ then npm install, but didn't work. I shared a copy of my project with you. Thanks.

[ma77hi4s]

@mlynch @baltazaroliveira - I had the same problem as baltazaroliveira (GoogleAnalytics). I followed the suggestion _ionic state reset and then rm -rf nodemodules/ then npm install and it worked for me!

[baltazaroliveira]

@mlynch @ma77hi4s I have do that!

1. ionic state reset
2. rm -rf node_modules (used rd /s /q node_modules/) [rm don´t work on Windows)
3. npm install

I have the same error.

Can you share the part of your code where you call? [I call in app.component.ts]

1. GoogleAnalytics.startTrackerWithId("UA-XXX-XX");

My code

1. GoogleAnalytics.trackView("Perfil Visitas");

MyCode

Thanks!

[ma77hi4s]

app.component.ts:

import { Component, ViewChild } from '@angular/core';
import { Platform, MenuController, Nav } from 'ionic-angular';
import { StatusBar, GoogleAnalytics } from 'ionic-native';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  constructor(
    public platform: Platform
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      StatusBar.styleDefault();

      // Google analytics
      GoogleAnalytics.startTrackerWithId('UA-XXX');
      GoogleAnalytics.trackView('app_start');
    });
  }
}

Page:

import { Component } from '@angular/core';
import { NavController, NavParams, Platform } from 'ionic-angular';
import { GoogleAnalytics } from 'ionic-native';

@Component({
  templateUrl: 'a-page.html'
})
export class APage{

  constructor(private navCtrl: NavController,  private platform: Platform) {
    this.platform.ready().then(() => {
        GoogleAnalytics.trackView('a_view');
    });

  }
}

[baltazaroliveira]

Folowing @ma77hi4s, wraping trackview (only on "start" Page) in platform.view make it works (i don´t get trackings in GA but i think that is a question on time). I have no errors! This is the correct way to do?

[joubin-ca]

As for cordova-plugin-sqlite, I found this that may be helpful: https://github.com/nolanlawson/cordova-plugin-sqlite-2

[baltazaroliveira]

I don´t get logs from Google Analtytics neither records on GA platform.

Any time to receive records? @ma77hi4s it took much time to have records in GA platform? If you ativate debug mode you get logs?

app.component.ts:

@Component({
  template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
  rootPage = LoginPage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.

      // splash screen
      //Splashscreen.hide();

      if (Splashscreen) {
        setTimeout(() => {
          Splashscreen.hide();
        }, 1000);
      }

      // status bar
      StatusBar.styleDefault();

      // GA
      GoogleAnalytics.startTrackerWithId("UA-xxx--xx");
      GoogleAnalytics.debugMode();

    });
  } // construtor
}

Page:

@Component({
  selector: 'login',
  templateUrl: 'login.html'
})
export class LoginPage {
  @ViewChild('txtutilizador') InputUtilizador_Focus

  utilizador: string = "";
  password: string = "";
  guardadados_login: boolean = false;

  mostra_btnFechar: boolean;

  // ARRANQUE
  constructor(public navCtrl: NavController,
    public loadingCtrl: LoadingController,
    public platform: Platform,
    public alertCtrl: AlertController,

    public servicesFuncoesCtrl: Services_Funcoes) {

    // se ANDROID mostra o botão..
    if (this.platform.is('android')) {
      this.mostra_btnFechar = true;
    }

    // GA (necessário estar dentro do platform.ready())
    // se 1º página de "arranque" - erro a corrigir

    this.platform.ready().then(() => {
      GoogleAnalytics.trackView("Login");
    });
 }

[baltazaroliveira]

Using this code

// GA
      GoogleAnalytics.debugMode();
      GoogleAnalytics.startTrackerWithId("UA-17772329-18");

      GoogleAnalytics.enableUncaughtExceptionReporting(true)
        .then((_success) => {
          console.log(_success)
        }).catch((_error) => {
          console.log(_error)
        })

**I get this**

Enabled uncaught exception reporting

[gulukul]

Hi, I am having the same problem with the plugin StreamingMedia.

I did: rm -rf node_modules/ npm install ionic plugin add cordova-plugin-streaming-media Plugin "com.hutchind.cordova.plugins.streamingmedia" already installed on ios.

When I run:

this.platform.ready().then(() => {
      StreamingMedia.playVideo(url, options);
    });

I get: Install the t plugin: 'ionic plugin add cordova-plugin-streaming-media'

I also tried adding --dev option in package.json build command.

[mlynch]

Thanks @shikharls for the test case, we now see it on our end and are digging in. Stand by

[mlynch]

Okay, I think I figured this one out! Can you all check your www/index.html file, and see if you have this line here:

if you do, please remove it. @shikharls this fixed your app you sent me. Once I removed that line it all worked :D

[gulukul]

@mlynch Thanks! I had put that for some debugging. Although, one thing: I removed that line from src/index.html. I thought that this would also update www/index.html when I run (serve or emulate) the app?

Thanks

[baltazaroliveira]

Still the same error in Google Analtytics.

Made all steps of http://blog.ionic.io/ionic-2-rc-weekend-updates/

I get the same error described above...

Any update?

[ihadeed]

@baltazaroliveira

1. Are you having any issues with other plugins? or is it just the Google Analytics plugin?
2. Try to manually remove the platform and re-add the @latest version, instead of using ionic state reset
3. Try creating a new project from scratch and just keep it minimal, add the plugin in there and test it out.

Also it might be worth trying to re-install cordova and ionic

npm rm -g ionic cordova
npm i -g ionic@latest cordova@latest

[mlynch]

Also @baltazaroliveira check to see if you have that line as per my comment above

[mlynch]

Hey everyone. Follow up to this, please make sure that the plugin you installed is actually listed in the plugins/ directory. If it's not, please let me know by commenting on this issue, as it might actually be a separate CLI issue.

[baltazaroliveira]

@ihadeed

Do what you suggested

• Remove Ionic and Cordova
• Add again latest versions
• Create new App
• Install only GA plugin

Extra: Updated Android SDK

Same error...

Enabled uncaught exception reporting

When build i get this message. I think that is not important

App https://meocloud.pt/link/d6a457f1-1087-4c2e-9013-e91289aadf35/myapp.7z/

My Device is a Samsung S4 with Android Marshmallow!

In attach the project.

Please help!

[baltazaroliveira]

@mlynch Does not have that line.. Have you seen my Twitter about Keyboard?

[ihadeed]

@baltazaroliveira

Delete that android-4.4w directory, it's Android Wear SDK anyways (if you need it, move it temporarily).

Check this page here for full instructions on the requirements to build Android packages: https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html

If you have any more questions regarding the Android SDK stuff feel free to send me an email or find me on Ionic Worldwide Slack so we don't bother everyone here with the notifications.

[baltazaroliveira]

Deleted folder. No more warning.

Updated JDK but same error.

Will contact you by Slack! Thanks!

[baltazaroliveira]

Talked with @ihadeed on Slack Chat. He don´t know what could be the problem.. So i don´t have GA ..

Using Piwik..

[mlynch]

@baltazaroliveira just seeing now that you sent a link for the app bundle, thanks for doing that! I will take a look and see if I can figure out what might be up with GA

[baltazaroliveira]

Piwik is a little slow, but i get statistics..

[baltazaroliveira]

Give up on Piwik, too slow.... GA don´t work.. Waiting for solution or Ionic Analytics. :-)

GA Http don´t work on mobile..

https://www.google-analytics.com/collect?v=1&tid=UA-17772329-19&cid=41f34a9ba27b8ef5&t=pageview&cd=Login&dp=Vendedores&an=Vendedores&av=1.0.0

[mlynch]

@baltazaroliveira I fixed the app you sent me. It seemed to be a case of plugins getting in an odd state, which can happen sometimes depending on whether there are build artifacts still in the platform build directories.

To fix it:

rm -rf platforms/
cordova platform add android
cordova prepare android

If that doesn't work, then remove all the plugins from the plugin directory first, install them again, then follow the steps above.

Confirmed this is not an issue with ionic-native nor RC