Ionic 4 Angular 8 Tutorial: Learn to Build CRUD Mobile Apps
Convert JPG to pdf
hi there, most of the times i have to face the same issue and due to shortage of time i use www.coolutils.com they provide wide range of converters you can check it out here https://www.coolutils.com/TotalPDFConverter i hope that will be beneficial for you.
All the best
Alternative time picker for ionic
Thanks. That ng2-date-picker is pretty short on examples considering how many downloads it has. Struggling to get it to work as a timepicker properly.
I get the error:
ERROR Error: Uncaught (in promise): TypeError: value.clone is not a function
TypeError: value.clone is not a function
at UtilsService.push…/node_modules/ng2-date-picker/fesm5/ng2-date-picker.js.UtilsService.convertToMomentArray (ng2-date-picker.js:415)
at DatePickerComponent.push…/node_modules/ng2-date-picker/fesm5/ng2-date-picker.js.DatePickerComponent.writeValue (ng2-date-picker.js:3512)
at forms.js:2118
at forms.js:3273
at Array.forEach ()
at FormControl.push…/node_modules/@angular/forms/fesm5/forms.js.FormControl.setValue (forms.js:3273)
at forms.js:4872
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Object.onInvoke (core.js:17299)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
at resolvePromise (zone.js:831)
at zone.js:896
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17290)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push…/node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at drainMicroTaskQueue (zone.js:601)
New App - ReactJS and v5 CLI - missing www/index.html
Hi, I am also facing the same issue. can somebody throw a light why www folder is empty for ionic react project? and how to recover from that
Update NodeJs -> Error when i add Android
Hello
I become an new Workspace in my Company. So that is install a new nodejs Version. 12.4.0
When i clone my Ionic Project and while add the Platform Android i become always this error.
[cordova-res]
[cordova-res] Something went wrong installing the “sharp” module
[cordova-res]
[cordova-res] The module ‘\?\C:\Users\martin.kuenz\AppData\Roaming\npm\node_modules\cordova-res\node_modules\sharp\build\Release\sharp.node’
[cordova-res] was compiled against a different Node.js version using
[cordova-res] NODE_MODULE_VERSION 57. This version of Node.js requires
[cordova-res] NODE_MODULE_VERSION 72. Please try re-compiling or re-installing
[cordova-res] the module (for instance, using npm rebuild
or npm install
).
[cordova-res]
[cordova-res] - Ensure the version of Node.js used at install time matches that used at runtime
[cordova-res] - Consult the installation documentation at https://sharp.pixelplumbing.com/en/stable/install/
[cordova-res] - Search for this error at https://github.com/lovell/sharp/issues
[cordova-res]
Can anybode help me? Thx
Ionic 4 Skip Start-Page when user is logged in
still showing login page for 1 second. see authenticationState has initial value as false.
authenticationState = new BehaviorSubject(false);
so it’s going to the login and once authenticationState got true it’s going to the home.
Rtsp Player
Hey anyone play RTSp url in ionic framework. I use streaming media but that is only compatible with android version > 9 and not working for all android version greater than 6 also. I need a plugin that work for all the android versions. Please suggest me.
Thanks
Error: ENOENT: no such file or directory, open 'platforms/android/app/build/outputs/apk/debug/app-debug.apk'
Can you try reinstalling platform?
Looking for freelance talented Ionic 4 Dev and UI person
We are started up based out of india company called skywings.co.in . It’s and tour n travel services activities platform which connects travellers and local activity suppliers. We are based of Gurgaon. Let me know if you are interested with the work and would like to learn more about the project, reply here or send me a private message with your contact info and we’ll talk in more detail. Thanks.
Cordova Plugin inappbrowser : How use Cordova in Cordova Webview?
Hello
I need your help for my project.
-
I installed the plugin: In App Browser https://ionicframework.com/docs/native/in-app-browser
Documentation is here: https://github.com/apache/cordova-plugin-inappbrowser -
Dynamically, I created an HTML page in this directory: this.file.dataDirectory
-
I try to load this page on the webview like this:
IMPORT
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
CONSTRUCTOR
constructor(private iab: InAppBrowser) {}
MY CODE
const browser = this.iab.create( this.webview.convertFileSrc( this.file.dataDirectory + 'jojo/index.html' ) );
Everything is ok and there aren’t problems. My page jojo/index.html can load.
The page is load in the Cordova WebView
If I don’t mistake, because I don’t set the “target” value (the value is still “_self”) my page jojo/index.html is load in the Cordova WebView. Right ?
Reference:
So … on my page, I want to use ionic functions (or cordova functions).
How can I do that ?
My config
This is my configuration:
Ionic:
ionic (Ionic CLI) : 4.12.0 (/usr/local/lib/node_modules/ionic)
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 (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 7.1.4, ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 11 other plugins)
System:
Android SDK Tools : 26.1.1 (/Users/jojo/Library/Android/sdk)
ios-deploy : 2.0.0
NodeJS : v11.10.0 (/usr/local/bin/node)
npm : 6.9.0
OS : macOS Mojave
Xcode : Xcode 10.2.1 Build version 10E1001
Thank you so much for your help.
Error: ENOENT: no such file or directory, open 'platforms/android/app/build/outputs/apk/debug/app-debug.apk'
First, remove platform by this command
ionic cordova platform rm android
Upgrade cordova-android@7 with root user
sudo npm install -g cordova-android@7
Add android platform
ionic cordova platform add android
Update NodeJs -> Error when i add Android
I think you need delete node_modules folder and install again with new nodejs version.
npm install
Capacitor help information
When I type cordova --help I get a fair bit of information of commands to try and test out.
cordova --help
cordova command [options]
Global Commands
create ............................. Create a project
help ............................... Get help for a command
telemetry .......................... Turn telemetry collection on or off
config ............................. Set, get, delete, edit, and list global cordova options
Project Commands
info ............................... Generate project information
requirements ....................... Checks and print out all the requirements
for platforms specified
platform ........................... Manage project platforms
plugin ............................. Manage project plugins
prepare ............................ Copy files into platform(s) for building
compile ............................ Build platform(s)
clean .............................. Cleanup project from build artifacts
run ................................ Run project
(including prepare && compile)
serve .............................. Run project with a local webserver
(including prepare)
Learn more about command options using 'cordova help <command>'
Aliases
build -> cordova prepare && cordova compile
emulate -> cordova run --emulator
Options
-v, --version ...................... prints out this utility's version
-d, --verbose ...................... debug mode produces verbose log output for all activity,
--no-update-notifier ............... disables check for CLI updates
--nohooks .......................... suppress executing hooks
(taking RegExp hook patterns as parameters)
Examples
cordova create myApp org.apache.cordova.myApp myApp
cordova plugin add cordova-plugin-camera
cordova platform add android
cordova plugin add cordova-plugin-camera --nosave
cordova platform add android --nosave
cordova requirements android
cordova build android --verbose
cordova run android
cordova build android --release -- --keystore="..\android.keystore" --storePassword=android --alias=mykey
cordova config ls
But when I type capacitor --help I get very little information and no examples. Does anyone have any command line examples that I can try out to see how things work?
I know the main page at https://capacitor.ionicframework.com/docs/android/custom-code/ has lots of code, but there has to be a few main command line examples that can be written in a few lines. even capacitor create --help does not give much more information and has no examples.
Could someone reply with a few command line capacitor examples they have tried!
capacitor --help
Usage: capacitor [options] [command] <command>
Options:
-V, --version output the version number
-h, --help output usage information
Commands:
create [options] [directory] [name] [id] Creates a new Capacitor project
init [options] [appName] [appId] Initializes a new Capacitor project in the current directory
serve Serves a Capacitor Progressive Web App in the browser
sync [platform] updates + copy
update [platform] updates the native plugins and dependencies based in package.json
copy [platform] copies the web app build into the native app
open [platform] opens the native project workspace (xcode for iOS)
add [platform] add a native platform project
ls [platform] list installed Cordova and Capacitor plugins
doctor [platform] checks the current setup for common errors
plugin:generate start a new Capacitor plugin
Ionic 3 ion-slides are not properly aligned with each other
I am trying to make a product comparison page in my ionic app. The first section should be the main specs titles (name, price, ram,…). So I figure out a way by using multiple ion-slides
inside ion-slides
, which worked perfectly before looping the array of products.
Here is the code:
<div>
<ion-slides slidesPerView="5">
<ion-slides slidesPerView="1" class="slideWidth" >
<ion-slide>
<ion-item class="slide_height">
<ion-label><b>Logo</b></ion-label>
</ion-item>
<ion-item>
<ion-label><b>Product</b></ion-label>
</ion-item>
<ion-item>
<ion-label><b>Company</b></ion-label>
</ion-item>
<ion-item>
<ion-label><b>Price</b></ion-label>
</ion-item>
<ion-item>
<ion-label><b>Discount</b></ion-label>
</ion-item>
<ion-item>
<ion-label><b>Final Price</b></ion-label>
</ion-item>
</ion-slide>
</ion-slides>
<ion-slides slidesPerView="2" pager paginationType="progress">
<ion-slide *ngFor="let offer of array; let i = index">
<ion-item>
<img class="brand_logo" [src]="url">
</ion-item>
<ion-item>
<ion-label>{{offer.product}}</ion-label>
</ion-item>
<ion-item>
<ion-label>{{offer.cname}}</ion-label>
</ion-item>
<ion-item>
<ion-label>{{offer.price}} $</ion-label>
</ion-item>
<ion-item>
<ion-label>{{offer.discount}} %</ion-label>
</ion-item>
<ion-item>
<ion-label>{{offer.price-offer.price*(offer.discount)/100}} $</ion-label>
</ion-item>
</ion-slide>
</ion-slides>
</ion-slides>
</div>
Here is a stackblitz. The ion-items
are not well aligned with each other, between the main fix ion-slide
and the others generated in a for loop.
P.S.: Using ion-grid
with ion-col
and ion-row
produced the same effect.
Native "Printer" plugin not working
I have also faced the same error with my Epson printer and it cannot be connected after I had changed the Network Adaptor on my system. I have also searched epson printer error code 0xf3, but I found no such benefit from it.
Background Design
Plugin not found, or is not a CDVPlugin. Check your plugin mapping in config.xml ionic1 ios
https://stackoverflow.com/a/56767857/5568646
This was the solution to my query
Waiting for Background app running in Ionic like Alaram app
So Do you know background app running in ionic4 like alaram app.Share me please.Thanks for your help.
Www folder is missing with ionic react app using cordova plugin
Ionic version:
ionic 4.0
Current behavior:
I am trying to create a ionic react app, using my custom cordova plugin.
I use https://ionicframework.com/blog/ionic-cli-v5-brings-react-beta-support/ to create the app. After adding cordova plugin and running ionic build/cordova prepare for ios the www folder is empty.
compared to ionic react app, if i create app for target angular it fills www folder correctly.
Expected behavior:
ionic build/cordova prepare should add desired file including index.html to www folder which is not happening fo rreact-ionic app.
Steps to reproduce:
ionic start myApp --type=react
ionic cordova plugin list
ionic cordova plugin add cordova-plugin-custom
=> add cordova dependencies
ionic cordova platform ios
=> add www folder but empty
ionic cordova build ios
ionic cordova prepare ios
=> www folder is still empty
ionic cordova run ios
=> throws an error saying www/index.html not found.
Other information:
If I execute same steps as above except first line as ionic start myApp --type=angular
, it shows www folder correctly including index.html and works fine.
Ionic:
Ionic CLI : 5.0.2 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/react 0.0.5
Cordova:
Cordova CLI : 8.1.1 (cordova-lib@8.1.0)
Cordova Platforms : ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.0, (and 4 other plugins)
Utility:
cordova-res : 0.5.1
native-run : 0.2.7
System:
NodeJS : v8.10.0 (/usr/local/bin/node)
npm : 6.9.0
OS : macOS Mojave
Xcode : Xcode 10.2.1 Build version 10E1001
[Capacitor] Anyone tried Camera in a PWA?
Jip, I am busy now searching for some solutions on a few bugs with the Capacitor Camera. My opinion: Rather don’t use it, it’s still full of bugs