Ionic 3 - Native AppPrefences plugin_not_installed error

Question

This has driven me mad. So I created a dedicated project for this one and here's what I've done.

creating the blank ionic project. here's console output

[DEBUG] Reason for not using local CLI: BASE_DIRECTORY_NOT_FOUND
[DEBUG] CLI flags: { interactive: true, confirm: false }
[DEBUG] { cwd: 'E:\\Project\\Ionic', local: false, binPath:
        'C:\\Users\\yandi\\AppData\\Roaming\\npm\\node_modules\\ionic\\bin\\ionic', libPath:
        'C:\\Users\\yandi\\AppData\\Roaming\\npm\\node_modules\\ionic\\dist\\index.js' }
[DEBUG] Daemon found (pid: 11712)

? What starter would you like to use: blank
√ Creating directory .\AppPreferences - done!
√ Downloading and extracting blank starter - done!

? Would you like to integrate your new app with Cordova to target native iOS and Android? Yes
√ Personalizing ionic.config.json and package.json - done!
> ionic integrations enable cordova --quiet
√ Downloading integration cordova - done!
[DEBUG] Integration files downloaded to C:\Users\yandi\AppData\Local\Temp\ionic-integration-cordova (files: config.xml,
        resources)
[DEBUG] Blacklist:
√ Copying integrations files to project - done!
[OK] Added cordova integration!

Installing dependencies may take several minutes.

> npm i
√ Running command - done!

getting the Cordova plugin needed. Console output

√ Creating .\www directory for you - done!
> cordova plugin add cordova-plugin-app-preferences --save
Adding cordova-plugin-app-preferences to package.json

Saved plugin info for "cordova-plugin-app-preferences" to config.xml

getting npm packages needed. Console output

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @ionic-native/app-preferences@4.7.0
added 1 package in 26.305s

adding the plugins to my app.module

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { AppPreferences } from '@ionic-native/app-preferences';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    AppPreferences,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

and then here's my page.ts

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

import { AppPreferences } from '@ionic-native/app-preferences';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public appPreferences: AppPreferences, public platform: Platform) {}

  checkPref(){
    this.platform.ready().then((success) => {
      this.appPreferences.show().then((success) => {
        alert(success);
      }, (fail) => {
        alert(fail);
      });
    }, (fails) => {
      console.log(fails);
    });
  }

}

page.html

<ion-content padding>
  <button ion-button (click)="checkPref()">Check Plugin</button>
</ion-content>

when I click it, it says "plugin_not_installed"

so, what did I do wrong? It really frustrating me out. I've figured out everything on my app and this is the last bit that I needed

**Updated : I'm serving it on my phone (Xiaomi Mi 4i) with the help of Ionic Dev App

If it's a native plugin, is this one of those ones which needs to be run on an emulator or an actual device? I've had this happen to me a few times with those. — Indy-Jones, Apr 24 '18 at 13:49
I'm running it on my phone using Ionic Dev App (Xiaomi Mi 4i). Or do I need to build it first? — Yandi Banyu Karima Waly, Apr 24 '18 at 13:51
`cordova-plugin-app-preferences` is not supported by `Ionic DevApp` you need to build it as an apk and run as a real app. For the full list of supported plugins: https://ionicframework.com/docs/pro/devapp/ — Ivar Reukers, Apr 24 '18 at 13:58
@Ivaro18 might I suggest you add that as an answer so that I can accept it — Yandi Banyu Karima Waly, Apr 24 '18 at 14:00
No problem, although my answer was influenced by the first two comments so I don't want to take away their credit — Ivar Reukers, Apr 24 '18 at 14:04
This could be helpful to other people: https://stackoverflow.com/a/50270455/813951 — Mister Smith, May 10 '18 at 10:14

score 3 · Accepted Answer · answered Apr 24 '18 at 14:02

3

cordova-plugin-app-preferences is not supported by the Ionic DevApp.

So you need to build it as an apk and run as a real app.

For the full list of supported plugins refer to the Ionic DevApp docs

answered Apr 24 '18 at 14:02

Ivar Reukers

7,560
9
56
99

Ionic 3 - Native AppPrefences plugin_not_installed error

1 Answers1