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+
Related
I'm using Ionic as an app and portal for the frontend, and the backend is Salesforce, for which we use the Salesforce SDK. Right now, I have an issue that only happens on Android. When requesting an API call, it gets a request timeout of 20 seconds. It was consistent when I tried to request again.
Here is the code for the service class
public CreateMTRCase(param): Promise<any> {
const service = DataService.getInstance();
if (!service) {
return;
}
param.id = service.getUserId();
return service.request({
path: '/services/apexrest/Example',
contentType: 'application/json',
method: 'POST',
data: param,
useProxy: false,
});
}
Here is the class that is submitting the data or requesting the data:
async submitRequest(modalCss: string) {
this.modal = modalCss;
this.isLoading = true;
const objparam = this.prepareMTRCase();
console.log("Object params: "+JSON.stringify(objparam));
const service = this.medTransSvc.CreateMTRCase(objparam);
service
.then(
(response) => {
if (response.error) {
let errorMessage: string = response.error;
if (errorMessage.includes(CommonConstants.NOT_ELIGIBLE)) {
this.abandonMTR(CommonConstants.NOT_ELIGIBLE);
}
return;
}
if (response.success === false && response.recordId === null) {
this.isSuccess = false;
return;
}
if (response.recordId !== null) {
this.recordId = response.recordId;
// getToken
this.getToken(this.filesToUpload, this.recordId);
}
},
(err) => {
const str = JSON.stringify(err);
console.log("Error: "+str);
this.abandonMTR('process');
}
)
.catch((err) => {
this.abandonMTR('process');
});
}
When requesting the API call, it falls to the "err" function, resulting in a gateway timeout. It always happens on Android, but on iOS and Portal, it works perfectly.
The error shows that in 20 seconds it will throw an error: the request is being failed, and the error message is timeout.
Do you have any idea why is error happens only on Android
Here is my ionic info
Ionic:
Ionic CLI : 6.20.3 (/Users/user/.nvm/versions/node/v10.24.1/lib/node_modules/#ionic/cli)
Ionic Framework : #ionic/angular 5.4.3
#angular-devkit/build-angular : 0.1000.8
#angular-devkit/schematics : 10.0.8
#angular/cli : 10.0.8
#ionic/angular-toolkit : 2.3.3
Cordova:
Cordova CLI : 11.0.0
Cordova Platforms : android 8.1.0, ios 5.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 28 other plugins)
Utility:
cordova-res : not installed globally
native-run : not installed globally
System:
ios-sim : 8.0.2
NodeJS : v10.24.1 (/Users/user/.nvm/versions/node/v10.24.1/bin/node)
npm : 6.14.12
OS : macOS
Xcode : Xcode 14.2 Build version 14C18
The dependencies which I installed on ionic
{
"name": "MyCare",
"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": {
"#agm/core": "^3.0.0-beta.0",
"#angular/common": "~10.0.0",
"#angular/core": "~10.0.0",
"#angular/forms": "~10.0.0",
"#angular/platform-browser": "~10.0.0",
"#angular/platform-browser-dynamic": "~10.0.0",
"#angular/router": "~10.0.0",
"#awesome-cordova-plugins/analytics-firebase": "^5.44.0",
"#awesome-cordova-plugins/camera": "^5.39.1",
"#awesome-cordova-plugins/core": "^5.39.1",
"#ionic-native/android-permissions": "^5.31.1",
"#ionic-native/core": "^5.31.1",
"#ionic-native/deeplinks": "^5.30.0",
"#ionic-native/file": "^5.31.1",
"#ionic-native/file-transfer": "^5.31.1",
"#ionic-native/geolocation": "^5.30.0",
"#ionic-native/google-analytics": "^5.31.1",
"#ionic-native/google-maps": "^5.5.0",
"#ionic-native/in-app-browser": "^5.30.0",
"#ionic-native/native-geocoder": "^5.30.0",
"#ionic-native/native-storage": "^5.31.1",
"#ionic-native/preview-any-file": "^5.36.0",
"#ionic-native/splash-screen": "^5.0.0",
"#ionic-native/status-bar": "^5.0.0",
"#ionic/angular": "^5.0.0",
"#ionic/storage": "^2.3.1",
"#ngx-translate/core": "^13.0.0",
"#ngx-translate/http-loader": "^6.0.0",
"#types/hammerjs": "^2.0.38",
"cordova-browser": "6.0.0",
"forcejs": "file:lib/forcejs",
"hammerjs": "^2.0.8",
"idlejs": "^3.0.0",
"ionic-pullup": "^5.0.0-beta.3",
"lottie-web": "^5.7.6",
"moment": "^2.29.1",
"ngx-autosize": "^1.8.4",
"ngx-lottie": "^6.4.0",
"rxjs": "~6.5.5",
"shelljs": "^0.7.0",
"ts-md5": "^1.2.7",
"tslib": "^2.0.0",
"zone.js": "~0.10.3"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.1000.0",
"#angular/cli": "~10.0.5",
"#angular/compiler": "~10.0.0",
"#angular/compiler-cli": "~10.0.0",
"#angular/language-service": "~10.0.0",
"#havesource/cordova-plugin-push": "^1.0.0",
"#ionic/angular-toolkit": "^2.3.0",
"#types/googlemaps": "^3.39.12",
"#types/jasmine": "~3.5.0",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.11.1",
"SalesforceMobileSDK-CordovaPlugin": "git+https://github.com/forcedotcom/SalesforceMobileSDK-CordovaPlugin.git#v8.3.0",
"codelyzer": "^6.0.0",
"cordova-android": "^8.1.0",
"cordova-androidx-build": "^1.0.4",
"cordova-annotated-plugin-android": "^1.0.4",
"cordova-ios": "^5.1.1",
"cordova-play-services-version-adapter": "^1.1.0",
"cordova-plugin-add-swift-support": "^2.0.2",
"cordova-plugin-analytics": "^2.0.0",
"cordova-plugin-android-permissions": "^1.1.2",
"cordova-plugin-androidx": "^3.0.0",
"cordova-plugin-androidx-adapter": "^1.1.3",
"cordova-plugin-camera": "^4.1.0",
"cordova-plugin-cocoapod-support": "^1.6.2",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-file-transfer": "^1.7.1",
"cordova-plugin-geolocation": "^4.1.0",
"cordova-plugin-google-analytics": "^1.9.0",
"cordova-plugin-googlemaps": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps.git#multiple_maps",
"cordova-plugin-googlemaps-sdk": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git",
"cordova-plugin-inappbrowser": "^4.1.0",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^5.0.0",
"cordova-plugin-nativegeocoder": "^3.4.1",
"cordova-plugin-nativestorage": "^2.3.2",
"cordova-plugin-preview-any-file": "^0.2.9",
"cordova-plugin-splashscreen": "5.0.2",
"cordova-plugin-statusbar": "2.4.2",
"cordova-plugin-whitelist": "^1.2.0",
"cordova-plugin-wkwebview-engine": "git+https://github.com/apache/cordova-plugin-wkwebview-engine.git",
"cordova-sqlite-storage": "^5.1.0",
"cordova-support-google-services": "^1.4.1",
"ionic-plugin-deeplinks": "^1.0.20",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.9.5"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-device": {},
"cordova-plugin-ionic-keyboard": {},
"com.salesforce": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-inappbrowser": {},
"ionic-plugin-deeplinks": {
"URL_SCHEME": "mycare",
"DEEPLINK_HOST": "dev4-top-internationalsos.cs32.force.com",
"DEEPLINK_SCHEME": "https"
},
"cordova-plugin-wkwebview-engine": {},
"cordova-sqlite-storage": {},
"cordova-plugin-nativegeocoder": {
"LOCATION_WHEN_IN_USE_DESCRIPTION": "Use geocoder service"
},
"cordova-plugin-geolocation": {
"GPS_REQUIRED": "true"
},
"cordova-plugin-nativestorage": {},
"havesource-cordova-plugin-push": {
"SENDER_ID": "186917679445"
},
"cordova-support-google-services": {},
"#havesource/cordova-plugin-push": {
"SENDER_ID": "186917679445"
},
"cordova-plugin-androidx": {},
"cordova-plugin-androidx-adapter": {},
"cordova-androidx-build": {},
"cordova-plugin-file-transfer": {},
"cordova-plugin-file": {},
"cordova-plugin-android-permissions": {},
"cordova-plugin-google-analytics": {
"GMS_VERSION": "17.0.0"
},
"cordova-plugin-googlemaps": {
"LOCATION_WHEN_IN_USE_DESCRIPTION": "This app wants to get your location while this app runs only.",
"LOCATION_ALWAYS_USAGE_DESCRIPTION": "This app wants to get your location always, even this app runs in background."
},
"cordova-plugin-analytics": {},
"cordova-plugin-preview-any-file": {},
"cordova-plugin-camera": {
"ANDROID_SUPPORT_V4_VERSION": "27.+"
}
},
"platforms": [
"ios",
"android"
]
}
}
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
}
);
}
}
Error while ionic cordova build
sass: node_modules/ionic-angular/themes/ionic.functions.scss
Full Error:
[11:34:50] sass started ...
[11:34:51] sass: node_modules/ionic-angular/themes/ionic.functions.scss, line: 35
The map color `contentbg` is not defined. Please make sure the color exists in your `$colors` map. For
example: $colors: ( contentbg: #327eff );
L35: #error $error-msg;
[11:34:51] ionic-app-script task: "build"
[11:34:51] Error: Failed to render sass to css
Error: Failed to render sass to css
at new BuildError (/Users/anand/projects/Ionic/ShoppingCart/PilotProject/ionic-firebase-login/node_modules/#ionic/app-scripts/dist/util/errors.js:16:28)
at Object.callback (/Users/anand/projects/Ionic/ShoppingCart/PilotProject/ionic-firebase-login/node_modules/#ionic/app-scripts/dist/sass.js:210:24)
at options.error (/Users/anand/projects/Ionic/ShoppingCart/PilotProject/ionic-firebase-login/node_modules/node-sass/lib/index.js:294:32)
[ERROR] An error occurred while running subprocess ionic-app-scripts.
ionic-app-scripts build --target cordova --platform android exited with exit code 1.
Re-running this command with the --verbose flag may provide more information.
// package.json
This is my package.json
{
"name": "ionic-firebase-cart",
"version": "0.0.1",
"author": "IonicThemes",
"homepage": "https://ionicthemes.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.4.0",
"#ionic-native/facebook": "^4.20.0",
"#ionic-native/google-plus": "^4.20.0",
"#ionic-native/splash-screen": "4.4.0",
"#ionic-native/status-bar": "4.4.0",
"#ionic-native/twitter-connect": "^4.20.0",
"#ionic-native/vibration": "^5.3.0",
"#ionic/storage": "2.1.3",
"angular2-tag-input": "^1.2.3",
"angularfire2": "^5.1.2",
"cordova-android": "6.4.0",
"cordova-ios": "^4.5.5",
"cordova-plugin-browsertab": "0.2.0",
"cordova-plugin-buildinfo": "2.0.2",
"cordova-plugin-compat": "1.2.0",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-facebook4": "^1.10.1",
"cordova-plugin-googleplus": "^5.3.2",
"cordova-plugin-inappbrowser": "3.0.0",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^1.2.1",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-vibration": "^3.1.0",
"cordova-plugin-whitelist": "^1.3.3",
"cordova-universal-links-plugin": "~1.2.1",
"cordova-universal-links-plugin-fix": "1.2.1",
"firebase": "^5.9.2",
"ionic-angular": "3.9.2",
"ionic-native": "^2.9.0",
"ionicons": "3.0.0",
"promise-polyfill": "8.1.0",
"rxfire": "^3.3.5",
"rxjs": "6.3.3",
"rxjs-compat": "6.3.3",
"sw-toolbox": "3.6.0",
"twitter-connect-plugin": "git+https://github.com/chroa/twitter-connect-plugin.git",
"zone.js": "0.8.18"
},
"devDependencies": {
"#ionic/app-scripts": "^3.2.3",
"#ionic/lab": "1.0.15",
"typescript": "2.4.2"
},
"description": "An Ionic project",
"cordova": {
"platforms": [
"ios",
"android"
],
"plugins": {
"cordova-plugin-device": {},
"cordova-plugin-facebook4": {
"APP_ID": "186848361921511",
"APP_NAME": "myApplication"
},
"cordova-plugin-googleplus": {
"REVERSED_CLIENT_ID": "com.googleusercontent.apps.1054364409223-ce6upclbeq8pmhkn4"
},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-whitelist": {},
"twitter-connect-plugin": {
"FABRIC_KEY": "dbf48d8f78bb37d7792891eb24607",
"TWITTER_KEY": "kMV673U1X4CduYL",
"TWITTER_SECRET": "mb03DWehE5zRcb4g6Yl3tORCNy503rc4"
},
"cordova-plugin-buildinfo": {},
"cordova-universal-links-plugin": {},
"cordova-plugin-browsertab": {},
"cordova-plugin-inappbrowser": {}
}
}
}
//
** And After this below Error**
Error: Failed to render sass to css
at new BuildError (/Users/anand/projects/Ionic/ShoppingCart/PilotProject/ionic-firebase-login/node_modules/#ionic/app-scripts/dist/util/errors.js:16:28)
at Object.callback (/Users/anand/projects/Ionic/ShoppingCart/PilotProject/ionic-firebase-login/node_modules/#ionic/app-scripts/dist/sass.js:210:24)
at options.error
Getting errors this
(/Users/anand/projects/Ionic/ShoppingCart/PilotProject/ionic-firebase-login/node_modules/node-sass/lib/index.js:294:32)
[ERROR] An error occurred while running subprocess ionic-app-scripts.
Somewhere in your your Sass files you specified contentbg as a color name,
If you meant it you should consider adding it to your $colors variable in src/theme/variables.scss
$colors: (
primary: #488aff,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
contentbg: #21b8ff <<-------
);
Consider checking Ionic documentation about theming your app : https://ionicframework.com/docs/v3/theming/theming-your-app/
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"
}
Can I give black color for the status bar items? Because I need to change the background color to white as shown below.Then I can't see the status bar items hence those are also white color.Any help?
Note: I'm testing this on Android device (6.0).
this.statusBar.styleDefault();
this.statusBar.backgroundColorByHexString("#fff");//white
Now (i.e. White items):
I need like this(i.e. Black items):
package.json
{
"name": "ionic-hello-world",
"version": "0.0.0",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build --prod",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "4.1.3",
"#angular/compiler": "4.1.3",
"#angular/compiler-cli": "4.1.3",
"#angular/core": "4.1.3",
"#angular/forms": "4.1.3",
"#angular/http": "4.1.3",
"#angular/platform-browser": "4.1.3",
"#angular/platform-browser-dynamic": "4.1.3",
"#ionic-native/brightness": "^3.10.3",
"#ionic-native/core": "3.12.1",
"#ionic-native/facebook": "^3.5.0",
"#ionic-native/network": "^3.11.0",
"#ionic-native/splash-screen": "3.12.1",
"#ionic-native/status-bar": "3.12.1",
"#ionic/storage": "2.0.1",
"cordova-android": "^6.2.3",
"cordova-plugin-brightness": "^0.1.5",
"cordova-plugin-facebook4": "^1.9.0",
"cordova-plugin-statusbar": "~2.2.1",
"cordova-plugin-whitelist": "^1.3.1",
"ionic-angular": "3.4.2",
"ionic-plugin-keyboard": "^2.2.1",
"ionicons": "3.0.0",
"lodash": "^4.17.4",
"rxjs": "5.4.0",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.12",
"cordova-plugin-network-information": "~1.3.3"
},
"devDependencies": {
"#ionic/app-scripts": "1.3.8",
"#ionic/cli-plugin-cordova": "1.4.0",
"#ionic/cli-plugin-ionic-angular": "1.3.1",
"#types/nprogress": "0.0.29",
"nprogress": "^0.2.0",
"typescript": "2.3.3"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [],
"description": "An Ionic project",
"cordova": {
"platforms": [
"android"
],
"plugins": {
"cordova-plugin-whitelist": {},
"ionic-plugin-keyboard": {},
"cordova-plugin-brightness": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-facebook4": {
"APP_ID": "60",
"APP_NAME": "app"
},
"cordova-plugin-network-information": {}
}
}
}
I'm sorry, but styleDefault is only available on ios and windows phone (docs)
StatusBar.styleDefault
Use the default statusbar (dark text, for light backgrounds).
Supported Platforms
_ iOS
_ Windows Phone 7
_ Windows Phone 8
_ Windows Phone 8.1
That being said, I think you can only change the background color, but I guess the font color will be set based on that... I've changed the status bar background color several times, using a dark color, and the font color was set to white automatically.
In xml (theme attribute):
<item name="android:windowLightStatusBar">
Or programmatically:
View someView = findViewById(R.id.some_view); if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
someView.setSystemUiVisibility(someView.getSystemUiVisibility() |View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
}
Sorry writing it on mobile it's hard to put code into these code fields there...