Develop Reference

Ionic One signal Plugin not installed in ionic 6 android platform 10.0.0 issue

I am using ionic 6 project and installed one signal plugin for notification.
$ ionic cordova plugin add onesignal-cordova-plugin
$ npm install #awesome-cordova-plugins/onesignal
Plugin version in my package.json.
"onesignal-cordova-plugin": "^3.1.0",
"#awesome-cordova-plugins/onesignal": "^5.44.0",
Android Platform version *** android 10.0.0 ***
After Implementing, made build by ionic cordova build android / by --prod and installed it.
After opening the installed application its throw error of
ERROR Error: Uncaught (in promise): plugin_not_installed
[ERROR Error: Uncaught (in promise): plugin_not_installed ][2]
[2]: https://i.stack.imgur.com/zUBxy.png
vendor.js:82382 ERROR Error: Uncaught (in promise): plugin_not_installed
at resolvePromise (polyfills.js:1364:35)
at polyfills.js:1271:21
at rejected (vendor.js:42934:89)
at push.3484._ZoneDelegate.invoke (polyfills.js:511:30)
at Object.onInvoke (vendor.js:101445:33)
at push.3484._ZoneDelegate.invoke (polyfills.js:510:56)
at push.3484.Zone.run (polyfills.js:271:47)
at polyfills.js:1428:38
at push.3484._ZoneDelegate.invokeTask (polyfills.js:545:35)
at Object.onInvokeTask (vendor.js:101432:33)
I have tired installing all versions: 5.36.0,5.36.1,5.37.0 etc from https://www.npmjs.com/package/#awesome-cordova-plugins/onesignal/v/5.37.0
but still facing the same issue.
Package.json file
{
"name": "My App",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/common": "~13.2.2",
"#angular/core": "~13.2.2",
"#angular/forms": "~13.2.2",
"#angular/platform-browser": "~13.2.2",
"#angular/platform-browser-dynamic": "~13.2.2",
"#angular/router": "~13.2.2",
"#awesome-cordova-plugins/core": "^5.43.0",
"#awesome-cordova-plugins/onesignal": "^5.44.0",
"#awesome-cordova-plugins/status-bar": "^5.43.0",
"#capacitor/app": "1.1.1",
"#capacitor/haptics": "1.1.4",
"#capacitor/keyboard": "1.2.2",
"#capacitor/status-bar": "1.0.8",
"#ionic-native/core": "^5.36.0",
"#ionic/angular": "^6.0.0",
"#ionic/cordova-builders": "^6.1.0",
"#ionic/storage": "^2.2.0",
"com.razorpay.cordova": "1.4.14",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^5.0.0",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"rxjs": "~6.6.0",
"tslib": "^2.2.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~13.2.3",
"#angular-eslint/builder": "~13.0.1",
"#angular-eslint/eslint-plugin": "~13.0.1",
"#angular-eslint/eslint-plugin-template": "~13.0.1",
"#angular-eslint/template-parser": "~13.0.1",
"#angular/cli": "~13.2.3",
"#angular/compiler": "~13.2.2",
"#angular/compiler-cli": "~13.2.2",
"#angular/language-service": "~13.2.2",
"#ionic/angular-toolkit": "^6.0.0",
"#types/jasmine": "~3.6.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"#typescript-eslint/eslint-plugin": "5.3.0",
"#typescript-eslint/parser": "5.3.0",
"cordova-android": "^10.0.0",
"cordova-browser": "^6.0.0",
"cordova-sqlite-storage": "^6.0.0",
"eslint": "^7.6.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~3.8.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"onesignal-cordova-plugin": "^3.1.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"typescript": "~4.4.4"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-sqlite-storage": {},
"onesignal-cordova-plugin": {},
"com.razorpay.cordova": {}
},
"platforms": [
"browser",
"android"
]
}
}
called onesingal function after platform ready in > app.component.ts .
constructor(private navCtrl: NavController, private platform: Platform,
private statusBar: StatusBar, public oneSignal: OnesignalService) {
this.appInitialize();
}
appInitialize() {
this.platform.ready().then(() => {
this.statusBar.backgroundColorByHexString('#ff6657');
this.oneSignal.OneSignalNotification();
});
}
Please guide , if anyone faced this issue and resolved it.

For Capacitor:
import OneSignal from 'onesignal-cordova-plugin';
async OneSignalInit() {
OneSignal.setAppId(this.ONESIGNAL_APP_ID);
OneSignal.setNotificationOpenedHandler((jsonData) => {
console.log('notificationOpenedCallback: ' + JSON.stringify(jsonData));
});
OneSignal.promptForPushNotificationsWithUserResponse((accepted) => {
console.log('User accepted notifications: ' + accepted);
});
}

Ionic 4 Select Multiple Image From Gallery with Image-picker Not Working

I Use Image-Picker for select multiple Image From Gallery But I Get The "Plugin_not_installed"
I Use From link To Install plugin ionic image picker
ionic cordova plugin add cordova-plugin-telerik-imagepicker
npm install #ionic-native/image-picker
after install cordova plugin and telerik image picker in my package.json :
{
"name": "sheedo",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/common": "~8.1.2",
"#angular/compiler": "~8.1.2",
"#angular/core": "~8.1.2",
"#angular/forms": "~8.1.2",
"#angular/platform-browser": "~8.1.2",
"#angular/platform-browser-dynamic": "~8.1.2",
"#angular/router": "~8.1.2",
"#ionic-native/camera": "^5.14.0",
"#ionic-native/core": "^5.14.0",
"#ionic-native/file": "^5.14.0",
"#ionic-native/image-picker": "^5.14.0",
"#ionic-native/screen-orientation": "^5.14.0",
"#ionic-native/splash-screen": "^5.0.0",
"#ionic-native/status-bar": "^5.0.0",
"#ionic/angular": "^4.7.1",
"cordova-android": "8.1.0",
"cordova-ios": "^5.0.1",
"cordova-plugin-camera": "^4.1.0",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-screen-orientation": "^3.0.2",
"cordova-plugin-telerik-imagepicker": "^2.3.3",
"core-js": "^2.5.4",
"es6-promise-plugin": "^4.2.2",
"ionic4-hidenav": "^0.1.2",
"jalali-moment": "^3.3.3",
"rxjs": "~6.5.1",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/architect": "~0.801.2",
"#angular-devkit/build-angular": "~0.801.2",
"#angular-devkit/core": "~8.1.2",
"#angular-devkit/schematics": "~8.1.2",
"#angular/cli": "~8.1.2",
"#angular/compiler": "~8.1.2",
"#angular/compiler-cli": "~8.1.2",
"#angular/language-service": "~8.1.2",
"#ionic/angular-toolkit": "~2.0.0",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^4.1.1",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-screen-orientation": {},
"cordova-plugin-camera": {
"ANDROID_SUPPORT_V4_VERSION": "27.+"
},
"cordova-plugin-file": {},
"cordova-plugin-telerik-imagepicker": {
"PHOTO_LIBRARY_USAGE_DESCRIPTION": " "
}
},
"platforms": [
"ios"
]
}
}
and for use image picker
let options: ImagePickerOptions = {
maximumImagesCount: 8
};`enter code here`
if( !this.imagePicker.hasReadPermission) this.imagePicker.requestReadPermission();
this.imagePicker.getPictures(options).then((results) => {
for (var i = 0; i < results.length; i++) {
console.log('Image URI: ' + results[i]);
}
}, (err) => {alert(err) });
and for run use ionic serve --devapp
and when click on getImage i use alert for get error
"Plugin_not_installed"
and in vsCode Console
`[ng] [console.warn]: "Native: tried calling ImagePicker.getPictures, but the ImagePicker plugin is not installed."
[ng] [console.warn]: "Install the ImagePicker plugin: 'ionic cordova plugin add cordova-plugin-telerik-imagepicker'"`
All the examples on the Internet have done this
also i test command
npm install #ionic-native/image-picker#4
for install version 4 but app not build.
my ionic version is 4 and i run android platform

You can use
https://ionicframework.com/docs/native/image-picker
ionic cordova plugin add cordova-plugin-telerik-imagepicker
npm install #ionic-native/image-picker
* `cordova plugin add cordova-android-support-gradle-release`
* `ioinc cordova platform rm android`
* `ionic cordova platform add android`
* `ionic cordova build android --prod`
import { ImagePicker, ImagePickerOptions } from '#ionic-native/image-picker/ngx';
constructor(private imagePicker: ImagePicker) { }
getPictures() {
let options: ImagePickerOptions = {
//here Quality of images, defaults to 100
quality: 100,
//here Width of an Image
width: 600,
//here Height of an Image
height: 600,
/** Output type, defaults to 0 (FILE_URI).
* FILE_URI :0 (number) it returns a actual path for an image
*/
outputType: 1
//here Maximum image count for selection, defaults to 15.
//while setting a number 15 we can load 15 images in one selection.
maximumImagesCount: 8
// max images to be selected, defaults to 15. If this is set to 1
};
this.imagePicker.getPictures(options)
.then(selectedImg => { })
}

try using the plugin in a non-native way.
In your component declare a window variable and then use it to call the plugin. You need to test it from a device, it's not working on browsers, neither on --devapp serve. It will work fine, but it isn't taking the options object... I need it to return base64 (outputType: 1), but always returns fileURI
/*Imports section*/
declare const window: any;
#Component({...})
export class HomePage implements OnInit {
constructor(){}
yourMethod() {
window.imagePicker.getPictures(
async function(results) {
for (var i = 0; i < results.length; i++) {
const currentPicture = results[i];
files.push(currentPicture);
}
console.log(files);
}, function (error) {
console.log('Error: ' + error);
},
{
outputType: 1,
maximumImagesCount: 30,
quality: 100
}
);
}
}

In VSCode, Cordova Tools cannot access the Ionic live reload server with EADDRNOTAVAIL error when launching an android emulator

I'm developing an app with Ionic3 by using VSCode in which cordova-tools is installed.
I want to use "ionic live reload".
When I select "Run Android on emulator" and clicked the run button, the following error occurs.
[cordova-tools] Error processing "launch": Error in the Ionic live
reload server: Error: listen EADDRNOTAVAIL: address not available
fe80::1:8100 at Server.setupListenHandle [as _listen2]
(net.js:1273:19) at listenInCluster (net.js:1338:12) at doListen
(net.js:1469:7) at process.internalTickCallback
(internal/process/next_tick.js:72:19) code: 'EADDRNOTAVAIL', errno:
'EADDRNOTAVAIL', syscall: 'listen', address: 'fe80::1', port: 8100 }
How can I solve this? Any ideas?
I've already tried:
change "devServerPort" in launch.json to random ones
change "devServerAddress" in launch.json to "localhost", "127.0.0.1" and "fe80::1"
kill all the node processes by the command "killall node"
but nothing solved.
When I changed the server address to random one, the error massage changed to make me enter a valid address.
When I killed node processes, I ensured the processes are killed by the command "ps aux | grep node" and Activity Monitor.
This is my launch.json about the android emulator.
{
"version": "0.2.0",
"configurations": [
...
{
"name": "Run Android on emulator",
"type": "cordova",
"request": "launch",
"platform": "android",
"target": "emulator",
"port": 9222,
"sourceMaps": true,
"cwd": "${workspaceFolder}",
"ionicLiveReload": true,
},
...
]
}
package.json
{
"name": "todo",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/animations": "5.2.10",
"#angular/common": "5.2.10",
"#angular/compiler": "5.2.10",
"#angular/compiler-cli": "5.2.10",
"#angular/core": "5.2.10",
"#angular/forms": "5.2.10",
"#angular/http": "5.2.10",
"#angular/platform-browser": "5.2.10",
"#angular/platform-browser-dynamic": "5.2.10",
"#ionic-native/core": "4.11.0",
"#ionic-native/local-notifications": "4.11.0",
"#ionic-native/splash-screen": "4.11.0",
"#ionic-native/status-bar": "4.11.0",
"#ionic/storage": "2.1.3",
"cordova-android": "7.0.0",
"cordova-plugin-badge": "^0.8.7",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.0.5",
"cordova-plugin-ionic-webview": "^1.1.19",
"cordova-plugin-local-notification": "^0.9.0-beta.2",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-sqlite-storage": "^2.3.1",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"rxjs": "5.5.10",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.26"
},
"devDependencies": {
"#ionic/app-scripts": "3.1.11",
"typescript": "~2.6.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-sqlite-storage": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-local-notification": {}
},
"platforms": [
"android"
]
}
}
My environments
macOS Mojave version 10.14.2
Ionic CLI version 4.8.0
Visual Studio Code version 1.30.2
Android Debug Bridge version 1.0.40
Android Studio version 3.2.1

Failure INSTALL_PARSE_FAILED_MANIFEST_MALFORMED <provider> has empty authorities when running cordova app on Android

I've got a small Ionic android which was running just fine. After upgrading to Android 7.1 SDK, I get the following error when running cordova run --target=emulator-5554 android --verbose:
Failure [INSTALL_PARSE_FAILED_MANIFEST_MALFORMED: Failed parse during installPackageLI: /data/app/vmdl444999769.tmp/base.apk (at Binary XML file line #103): <provider> has empty authorities attribute]
This is line 103 of platforms/android/app/build/intermediates/manifests/full/debug/AndroidManifest.xml:
<provider
android:name="com.marianhello.bgloc.sync.DummyContentProvider"
android:authorities="#string/content_authority"
android:exported="false"
android:syncable="true" />
It appears to me like the authorities attribute is defined, yet on some examples online I see that it has the app name in there while I have #string/content_authority instead. Unfortunately editing AndroidManifest.xml is worthless as it is generated.
Package.json:
{
"name": "travellogapp",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"start": "ionic-app-scripts serve",
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint"
},
"dependencies": {
"#angular/animations": "5.2.11",
"#angular/common": "5.2.11",
"#angular/compiler": "5.2.11",
"#angular/compiler-cli": "5.2.11",
"#angular/core": "5.2.11",
"#angular/forms": "5.2.11",
"#angular/http": "^6.1.10",
"#angular/platform-browser": "5.2.11",
"#angular/platform-browser-dynamic": "5.2.11",
"#ionic-native/background-geolocation": "^4.15.0",
"#ionic-native/core": "^4.15.0",
"#ionic-native/geolocation": "^4.15.0",
"#ionic-native/google-maps": "^4.14.0",
"#ionic-native/splash-screen": "~4.15.0",
"#ionic-native/status-bar": "~4.15.0",
"#ionic/storage": "2.2.0",
"cordova-android": "^7.1.1",
"cordova-android-play-services-gradle-release": "^1.4.4",
"cordova-browser": "^5.0.4",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-geolocation": "^4.0.1",
"cordova-plugin-googlemaps": "^2.4.6",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^2.2.0",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"rxjs": "5.5.11",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.26"
},
"devDependencies": {
"#ionic/app-scripts": "^3.2.0",
"typescript": "~2.6.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-mauron85-background-geolocation": {
"ICON": "#mipmap/icon",
"SMALL_ICON": "#mipmap/icon",
"ACCOUNT_NAME": "#string/app_name",
"ACCOUNT_LABEL": "#string/app_name",
"ACCOUNT_TYPE": ".account",
"CONTENT_AUTHORITY": "",
"GOOGLE_PLAY_SERVICES_VERSION": "11+",
"ANDROID_SUPPORT_LIBRARY_VERSION": "23+"
},
"cordova-android-play-services-gradle-release": {
"PLAY_SERVICES_VERSION": "15.+"
},
"cordova-plugin-geolocation": {},
"cordova-plugin-googlemaps": {
"API_KEY_FOR_ANDROID": "XXX",
"API_KEY_FOR_IOS": "XXX",
"PLAY_SERVICES_VERSION": "15.0.1",
"ANDROID_SUPPORT_V4_VERSION": "27.+"
}
},
"platforms": [
"browser",
"android"
]
}
}

I've figured this out as soon as I wrote my question.
The provider tag was introduced by cordova-plugin-mauron85-background-geolocation. The line android:authorities="#string/content_authority" says that the authorities value is defined in a string (variable) called content_authority. You will find the variable defined in your config.xml and 'packgage.json':
"cordova-plugin-mauron85-background-geolocation": {
...
"CONTENT_AUTHORITY": ""
}
For some reason, it ended up being empty for me. Removing and adding the plugin fixed it by setting it to:
"cordova-plugin-mauron85-background-geolocation": {
...
"CONTENT_AUTHORITY": "$PACKAGE_NAME"
}

ionic app crash when loading image with imagepicker

I am trying to load images with my ionic 3 app, using image-picker plugin.
here is the content of my package.json file :
{
"name": "app name",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "5.0.3",
"#angular/compiler": "5.0.3",
"#angular/compiler-cli": "5.0.3",
"#angular/core": "5.0.3",
"#angular/forms": "5.0.3",
"#angular/http": "5.0.3",
"#angular/platform-browser": "5.0.3",
"#angular/platform-browser-dynamic": "5.0.3",
"#ionic-native/base64": "^4.5.3",
"#ionic-native/core": "4.4.0",
"#ionic-native/image-picker": "^4.5.3",
"#ionic-native/photo-viewer": "^4.5.3",
"#ionic-native/splash-screen": "4.4.0",
"#ionic-native/status-bar": "4.4.0",
"#ionic/storage": "2.1.3",
"com-badrit-base64": "^0.2.0",
"com-sarriaroman-photoviewer": "^1.1.16",
"cordova-android": "^6.2.2",
"cordova-plugin-compat": "^1.2.0",
"cordova-plugin-device": "^2.0.1",
"cordova-plugin-ionic-keyboard": "^2.0.5",
"cordova-plugin-ionic-webview": "^1.1.16",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-telerik-imagepicker": "^2.1.8",
"cordova-plugin-whitelist": "^1.3.3",
"firebase": "^4.10.1",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"rxjs": "5.5.2",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"#ionic/app-scripts": "3.1.8",
"typescript": "2.4.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-compat": {},
"com.synconset.imagepicker": {
"PHOTO_LIBRARY_USAGE_DESCRIPTION": "We need to access to your library"
},
"com-badrit-base64": {},
"com-sarriaroman-photoviewer": {}
},
"platforms": [
"android"
]
}
}
when i want to access to use the plugin for image selection, here is the code i use in a file named publish.ts
take_pictures() {
this.picke.requestReadPermission().then(fullfilled => {
this.picke.getPictures({
quality: 65,
maximumImagesCount: 10,
width: 500,
height: 500,
outputType: 1 //to convert to base64 image once selected
}).then(data => {
for (let i = 0; i < data.length; i++) {
/* this.base64.encodeFile(data[i]).then(d=>{
alert(d)
this.annonce.photo.push(d)
}) */
/*.then(res=>{*/
// this.annonce.photo.push(this.getBase64Image(data[i]));
/* alert(res)
})*/
this.annonce.photo.push(("data:image/png;base64," + data[i]));
//alert(data[i]);
}
}).catch(e => {
this.toast.create({
message: e.message,
showCloseButton: true,
closeButtonText: "Okay",
dismissOnPageChange: true,
duration: 30000
}).present()
})
}, rejected => {
this.alert.create({
message : "Please you have to select at least one picture",
buttons :[{
text : "Ok",
role:"cancel"
}]
}).present();
})
}
This other method use the photoviewer plugin to make sure that when the user click on a picture, he can see it in a larger format :
see_photo(imag) {
this.viewer.show(imag);
}
To display images, i use a a file named publish.html. here is a code snippet of it.
<ion-item no-lines>
<p align="center">Pictures</p>
</ion-item>
<button ion-item color="primary" block (click)="take_pictures()">
take pictures
</button>
<ion-list>
<ion-card *ngFor="let imag of this.annonce.photo">
<img [src]="imag" (click)="see_photo(imag)" />
<button (click)="del_photo(imag)" ion-button
color="primary">Supprimer</button>
</ion-card>
</ion-list>
When images are selected, application crash. But if i select for exemple only one inage everythings works fine. But with moere than one image either application become very slow, or it crashes.
any help ?

in /platforms/android/project.properties remove all other com.android.support:support and com.android.support:appcompat and leave the latest ones. as:
cordova.system.library.9=com.android.support:support-v13:26.+
cordova.system.library.7=com.android.support:appcompat-v7:26.+
I have change this line:
cordova.system.library.1=com.android.support:appcompat-v7:23+
to:
cordova.system.library.1=com.android.support:appcompat-v7:27+