I tried to use css variables for this
ion-toolbar {
--background: #{$backgroundColor3};
--min-height: #{$spacing * 5};
}
All works correct in latest chrome and on android 8. But on adnroid 5 with chrome 40.* it is not worked.
I found that minimal android version for Ionic is 4.4 docs
>ionic info
Ionic:
Ionic CLI : 5.0.1
Ionic Framework : #ionic/angular 4.4.2
#angular-devkit/build-angular : 0.13.9
#angular-devkit/schematics : 7.3.9
#angular/cli : 7.3.9
#ionic/angular-toolkit : 1.5.1
Cordova:
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : android 8.0.0, ios 5.0.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.0, (and 9 other plugins)
Utility:
cordova-res : 0.3.0
native-run : 0.2.5
System:
Android SDK Tools : 26.1.1 (C:\Android)
NodeJS : v11.14.0 (C:\Program Files\nodejs\node.exe)
npm : 6.9.0
OS : Windows 10
Background is only one problem with styles:
Screenshot with issues from android 5
Normal screenshot
You need to be use add in global or page .scss file
--background: var(--ion-color-primary);
Here your answare.
Related
I just upgraded capacitor to 3.2.x and when I try to build my Ionic project, almost no capacitor function seems to work. For example, I get errors like:
Uncaught TypeError: cap.nativeCallback is not a function
...
Uncaught TypeError: Capacitor.createEvent is not a function
...
package com.getcapacitor.annotation does not exist
Here's my Ionic Info:
Ionic:
Ionic CLI : 6.17.1 (/usr/local/lib/node_modules/#ionic/cli)
Ionic Framework : #ionic/angular 5.5.2
#angular-devkit/build-angular : 0.1000.8
#angular-devkit/schematics : 10.0.8
#angular/cli : 10.0.8
#ionic/angular-toolkit : 2.3.3
Capacitor:
Capacitor CLI : 3.2.3
#capacitor/android : 3.0.0-beta.3
#capacitor/core : 3.2.3
#capacitor/ios : not installed
Cordova:
Cordova CLI : 10.0.0
Cordova Platforms : android 9.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 9 other plugins)
Utility:
cordova-res : 0.15.3
native-run : 1.4.1
System:
Android SDK Tools : 26.1.1 (/home/che-azeh/Android/Sdk)
NodeJS : v12.21.0 (/usr/bin/node)
npm : 7.5.2
OS : Linux 5.11
Here was the problem: if you look at the capacitor section under my Ionic Info, you'd notice an incosistency between Capacitor CLI, #capaciotr/core and #capacitor/android:
Capacitor:
Capacitor CLI : 3.2.3
#capacitor/android : 3.0.0-beta.3
#capacitor/core : 3.2.3
So what I did was upgrade all 3 to their latest versions:
npm install #capacitor/cli#latest #capacitor/core#latest
npm install #capacitor/android#latest
Now, it looks ike:
Capacitor:
Capacitor CLI : 3.2.3
#capacitor/android : 3.2.3
#capacitor/core : 3.2.3
Finally, I remove the Android folder created by capacitor (rm -R ./android), reinitialize capacitor (npx cap init) rebuild ionic project (ionic build android) and then npx cap add android.
And solved! Zero errors!
When I run Ionic 4 app, the browser shows api data but when i run same app on android device it doen't shows api data.
I am using Laravel as a backend, from where i am fetching api data.
The Ionic info is -
Ionic:
Ionic CLI : 6.5.0 (C:\Users\LENOVO\AppData\Roaming\npm\node_modules\#ionic\cli)
Ionic Framework : #ionic/angular 4.1.1
#angular-devkit/build-angular : 0.803.26
#angular-devkit/schematics : 8.3.26
#angular/cli : 8.3.26
#ionic/angular-toolkit : 2.2.0
Cordova:
Cordova CLI : not installed
Cordova Platforms : android 7.1.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 4 other plugins)
Utility:
cordova-res : not installed
native-run : 1.0.0
System:
NodeJS : v12.16.1 (C:\Program Files (x86)\nodejs\node.exe)
npm : 6.13.4
OS : Windows 10
I am really stuck here...
Your Problem is Cors you can install middleware in laravel to avoide the problem
Or you can test your application in the chrome disable securite
Try to Run :
chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security
and test your application in this chrome and let me khnow
How can I implement zoom functionality in a native qr scanner? I tried installing the camera preview plugin but it keeps crashing the app. The new versions probably do not support it. My project version:
Ionic:
Ionic CLI : 5.2.5(C:\Users\Ivo\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework :
#ionic/angular : 4.11.5
#angular-devkit/build-angular : 0.801.3
#angular-devkit/schematics : 8.1.3
#angular/cli : 8.1.3
#ionic/angular-toolkit : 2.1.1
Cordova:
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : not available
Cordova Plugins : not available
Utility:
cordova-res : 0.8.1
native-run : 0.2.9
System:
Android SDK Tools : 26.1.1 (C:\Users\Ivo\AppData\Local\Android\Sdk)
NodeJS : v10.11.0 (C:\Program Files\nodejs\node.exe)
npm : 6.9.0
OS : Windows 10
I have tried so far:
to install camera preview plugin but it is not supported by this ionic version
searched for a QRScanner method, but wasn't able to find one. Found methods only for flashlight and rotating camera.
I have a problem with this code when I run in the android device also ios I have the same problem
TypeError: Printer.getPlugin(...).check is not a function
at vendor.js:79303
at vendor.js:78443
at new ZoneAwarePromise (polyfills.js:3272)
at tryNativePromise (vendor.js:78442)
at getPromise (vendor.js:78463)
at vendor.js:79301
at Printer.push../node_modules/#ionic-native/printer/ngx/index.js.Printer.check (vendor.js:79308)
at Printer.push../node_modules/#ionic-native/printer/ngx/index.js.Printer.isAvailable (vendor.js:79294)
at SaleInfoPage.push../src/app/paenter code herege/sale-info/sale-info.page.ts.SaleInfoPage.print (main.js:1037)
at Object.eval [as handleEvent] (SaleInfoPage.html:54)
ionic info
Ionic:
Ionic CLI : 5.2.1 (/usr/local/lib/node_modules/ionic)
Ionic Framework : #ionic/angular 4.6.0
#angular-devkit/build-angular : 0.13.9
#angular-devkit/schematics : 7.3.9
#angular/cli : 7.3.9
#ionic/angular-toolkit : 1.5.1
Cordova:
Cordova CLI : 8.0.0
Cordova Platforms : android 8.0.0, ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 9 other plugins)
Utility:
cordova-res : 0.5.0 (update available: 0.5.2)
native-run : 0.2.6 (update available: 0.2.7)
System:
Android SDK Tools : 26.1.1 (/Users/shahab/Library/Android/sdk/)
ios-deploy : 2.0.0
NodeJS : v8.11.3 (/usr/local/bin/node)
npm : 5.6.0
OS : macOS Mojave
Xcode : Xcode 10.2.1 Build version 10E
code in function
print()
{
this.printer.isAvailable().then(function(){
this.printer.print("https://www.techiediaries.com").then(function(){
alert("printing done successfully !");
},function(){
alert("Error while printing !");
});
}, function(e){
console.log(e);
alert('Error : printing is unavailable on your device ');
});
}
I solved my problem by installing this plugin with the same library
isiigoteam/cordova-plugin-printer
Every time I make a change to my code, live-reload executes twice. The first reload is quick (< 1 second), then there is a pause, then another reload fires and takes substantially longer (2 - 3 seconds).
When I create a fresh Ionic starter app, I don't get this problem. I have tried different IDEs and get the same result.
My ionic info:
Ionic:
ionic (Ionic CLI) : 4.12.0
Ionic Framework : ionic-angular 3.9.5
#ionic/app-scripts : 3.2.2
Cordova:
cordova (Cordova CLI) : 8.1.2 (cordova-lib#8.1.1)
Cordova Platforms : none
Cordova Plugins : no whitelisted plugins (0 plugins total)
System:
Android SDK Tools : 26.1.1 (/Users/alexandrsteinberg/Library/Android/sdk)
ios-deploy : 2.0.0
NodeJS : v8.12.0 (/Users/alexandrsteinberg/.nvm/versions/node/v8.12.0/bin/node)
npm : 6.4.1
OS : macOS Mojave
Xcode : Xcode 10.2.1 Build version 10E1001