I am trying to use IonReactRouter with private routes and am using the standard react-router-dom implementation.
For some reason that I am struggling to understand the router is not passing the match or location props.
I have added a question to stack overflow that explains in full. I would really appreciate any help.
1 post - 1 participant
Hi, I am working on implementing custom plugin and in that plugin I want to insert records into sqlite using capacitor sqlite plugin…
Is there any example, where we can call method of one plugin from another plugin…
I have tried, but while calling a method need to pass PluginCall object as parameter… for that i need to pass message handler, PluginCall(this.handler,pluginId,callbackid,methodname,data);
Any idea will be helpful for this implementation…
Thanks in advance…
1 post - 1 participant
Hello everyone,
Currently I am developing an application, where I need to achieve several views in one content. One option is for that to use ion-card ( hide/show) based on the logic. However I am wondering if there is more “professional” way of achieving this requirement. I have tried with selectors but the thing is I have to be able to drag and drop that “views” as well.
In the picture is more understandable the requirement which I need to achieve.
Any help will be appreciated. Thank you all in advance.
1 post - 1 participant
Hi,
I have recently upgraded my ionic 3 application to Ionic 4. I have been trying to build back up the previous styles and I have been stuck on the ion-select component with the ion-options changes. In my previous application I was able to construct these radio buttons:
This is the code from the ionic 3 application:
<ion-item class = "border-input">
<ion-label>{{cycleLength}} Days</ion-label>
<ion-select [(ngModel)]="cycleLength" (ionChange)="showCycleDaysView()">
<ion-option [value]="d.name" *ngFor="let d of cycleDays">{{d.name}}</ion-option>
</ion-select>
</ion-item>
after making the changes for the ionic 4 the code looks like this:
<ion-item class = "border-input">
<ion-label>{{cycleLength}} Days</ion-label>
<ion-select [(ngModel)]="cycleLength" (ionChange)="showCycleDaysView()">
<div *ngFor="let d of cycleDays">
<ion-select-option value="{{d.name}}" >{{d.name}}</ion-select-option>
</div>
</ion-select>
</ion-item>
but the view looks like the following:
is there any way to get the same view or should I consider changing the style altogether?
1 post - 1 participant
I have a list and I would like to click in item and show icon checked only in item clicked
In ts I have the following code
selectDevice(device: any, i: any) {
this.devices[i];
this.mostrar = !this.mostrar;
}
and in my view I have
<ion-list>
<ion-item *ngFor="let device of devices; let i = index" (click)="selectDevice(device, i)" >
<img src="assets/images/wi-fi.png" alt="" class="wifi-img">
<ion-label>{{ device.SSID }}</ion-label>
<img src="assets/images/checked.png" *ngIf="mostrar || device[i]" alt="" class="checked-img">
</ion-item>
</ion-list>
2 posts - 1 participant
So a friend get me started using ionic/angular - and I’ve got about 6+ weeks of serious coding on a project - but I’m considering starting over because it seems to me that ionic doesn’t handle async programming correctly.
I had working code with simple JS - but had to play games to get the same code to work in ionic. I am reading and writing to firebase, which requires async programming to work - and yet over and over I see problems.
Others must be having similar problems, and yet the tutorial videos seems so optimistic. Is there a fundamental problem here, or is it just me?
I’m considering rewriting everything in an alternative language (and haven’t picked one yet) - so I’m rather discouraged. Perhaps it’s just me and I’ve missed some fundamental point?
Thanks for any help!
1 post - 1 participant
How can I pass in http.get(url, options) data in the body.
I know I can pass data to Header but I would like to pass data in the body in the JSON format.
Is it possible to do this with this componet?
Something like this:
httpOptions = {
headers: new HttpHeaders({
‘Content-Type’: ‘application/json’
}),
body: {
“receiveCountry”: “ABW”,
“sendAmount”: 100
},
observe: ‘body’,
params: new HttpParams({}),
responseType: ‘json’,
withCredentials: false
}
and execute this.http.get(url, this.httpOptions)
Please let me know.
1 post - 1 participant
I’m trying to scroll with selenium + selenide
(byTagName("ion-content")).scrollTo();
(byTagName(“ion-content”)).scrollIntoView(true);
I didn’t success , what i have to do for scroll elements ?
<ion-content [scrollEvents]=“true” #content (ionScroll)=“onScroll($event)”>
… content here
OBS: I’m using ionic 5
1 post - 1 participant
Hi everyone,
please help me . i want to show maps but still getting error, i was already installed plugin .
core.js:1449 ERROR Error: Uncaught (in promise): Error: [GoogleMaps]cordova-plugin-googlemaps is not installed or not ready yet.
Error: [GoogleMaps]cordova-plugin-googlemaps is not installed or not ready yet.
at Function.GoogleMaps.create (index.js:525)
at HomePage.webpackJsonp.195.HomePage.loadMap (home.ts:29)
at HomePage.webpackJsonp.195.HomePage.ngOnInit (home.ts:26)
at checkAndUpdateDirectiveInline (core.js:12411)
at checkAndUpdateNodeInline (core.js:13935)
at checkAndUpdateNode (core.js:13878)
at debugCheckAndUpdateNode (core.js:14771)
at debugCheckDirectivesFn (core.js:14712)
at Object.eval [as updateDirectives] (HomePage_Host.ngfactory.js? [sm]:1)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14697)
at c (polyfills.js:3)
at Object.reject (polyfills.js:3)
at NavControllerBase._fireError (nav-controller-base.js:223)
at NavControllerBase._failed (nav-controller-base.js:216)
at nav-controller-base.js:263
at t.invoke (polyfills.js:3)
at Object.onInvoke (core.js:4760)
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)
at polyfills.js:3
1 post - 1 participant
michalsnik.github.io
Is Aos Library incompatible with Ionic? I install it with the same way that i do it in angular, the css of Aos detect the attr but look like the js is not triggering on scroll.
And one more question, how do a scroll smooth?
Thanks !
1 post - 1 participant
Hello, I’m want to create an ionic app that uses MQTT.
I tried using this rep :
https://github.com/walterchau/ionic-mqtt
Importing this into modules results in multiple errors.
How to recreate the issue:
-create a blank ionic 4 project.
-follow implementation steps in rep.
my ionic info
Ionic:
ionic (Ionic CLI) : 4.12.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 5.2.3
@angular-devkit/build-angular : 0.901.11
@angular-devkit/schematics : 9.1.11
@angular/cli : 9.1.11
@ionic/angular-toolkit : 2.2.0
System:
NodeJS : v12.13.0 (/usr/local/bin/node)
npm : 6.12.0
OS : Linux 5.3
Any feedback can be helpful. Thanks 
1 post - 1 participant
Hi can u plz help me also for applying sass variable value in components i have variable in my scss file $button-md-font-size: 1.4rem; i want to set 1.4rem value in my component.
1 post - 1 participant
i am trying to use cordova keychain [plugin][1] for ios, inside my ionic application. but facing this error
2020-07-14 18:44:32.456726+0500 Farsh[1817:53270] THREAD WARNING: [‘Keychain’] took ‘14.635986’ ms. Plugin should use a background thread.
2020-07-14 18:44:32.456767+0500 Farsh[1817:55957] -[NSNull boolValue]: unrecognized selector sent to instance 0x7fff8062d9d0
2020-07-14 18:44:32.614153+0500 Farsh[1817:55957] *** Terminating app due to uncaught exception ‘NSInvalidArgumentException’, reason: ‘-[NSNull boolValue]: unrecognized selector sent to instance 0x7fff8062d9d0’
*** First throw call stack:
(
0 CoreFoundation 0x00007fff23e3cf0e __exceptionPreprocess + 350
1 libobjc.A.dylib 0x00007fff50ba89b2 objc_exception_throw + 48
2 CoreFoundation 0x00007fff23e5dc34 -[NSObject(NSObject) doesNotRecognizeSelector:] + 132
3 CoreFoundation 0x00007fff23e4190c forwarding + 1436
4 CoreFoundation 0x00007fff23e43bf8 _CF_forwarding_prep_0 + 120
5 Farsh 0x000000010e66aac0 __19-[CDVKeychain set:]_block_invoke + 432
6 libdispatch.dylib 0x000000010e9c7f11 _dispatch_call_block_and_release + 12
7 libdispatch.dylib 0x000000010e9c8e8e _dispatch_client_callout + 8
8 libdispatch.dylib 0x000000010e9cb2d8 _dispatch_queue_override_invoke + 1022
9 libdispatch.dylib 0x000000010e9da399 _dispatch_root_queue_drain + 351
10 libdispatch.dylib 0x000000010e9daca6 _dispatch_worker_thread2 + 135
11 libsystem_pthread.dylib 0x00007fff51c089f7 _pthread_wqthread + 220
12 libsystem_pthread.dylib 0x00007fff51c07b77 start_wqthread + 15
)
libc++abi.dylib: terminating with uncaught exception of type NSException
(lldb)
and my application crashed after this. Is there anyone know how to solve this problem ??
Please answer
Thanks in advance.
[1]: https://ionicframework.com/docs/native/keychain
1 post - 1 participant
Hi all ! Could anyone suggest please … is it possible to get it work with HttpClient on Android/iOs on real device ? I spend all day and did not find decision.
I configure a server side, add Access-Control-Allow-Origin: * and Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS but is did not help.
I have an error - Access to XMLHttpRequest at ‘https://my.com/feeds/backgrounds/bou.png’ from origin ‘http://localhost’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
I use.
import {HttpClient, HttpErrorResponse, HttpRequest, HttpResponse} from "@angular/common/http";
Ionic:
Ionic CLI : 5.4.16
Ionic Framework : @ionic/angular 5.1.1
@angular-devkit/build-angular : 0.803.10
@angular-devkit/schematics : 8.3.10
@angular/cli : 8.3.10
@ionic/angular-toolkit : 2.0.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.3, (and 23 other plugins)
Utility:
cordova-res : not installed
native-run : not installed
System:
Android SDK Tools : 26.1.1 (C:\Users\anton\AppData\Local\Android\Sdk)
NodeJS : v12.15.0 (C:\Program Files\nodejs\node.exe)
npm : 6.13.4
OS : Windows 10
cordova.cmd plugin ls
com-sarriaroman-photoviewer 1.2.4 "PhotoViewer"
cordova-clipboard 1.3.0 "Clipboard"
cordova-plugin-advanced-http 2.1.1 "Advanced HTTP plugin"
cordova-plugin-android-permissions 1.0.0 "Permissions"
cordova-plugin-app-version 0.1.9 "AppVersion"
cordova-plugin-background-mode 0.7.3 "BackgroundMode"
cordova-plugin-badge 0.8.8 "Badge"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-file 6.0.2 "File"
cordova-plugin-file-opener2 3.0.0 "File Opener2"
cordova-plugin-file-transfer 1.7.1 "File Transfer"
cordova-plugin-inappbrowser 3.1.0 "InAppBrowser"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.1.3 "cordova-plugin-ionic-webview"
cordova-plugin-local-notification 0.9.0-beta.2 "LocalNotification"
cordova-plugin-ms-adal 0.10.1 "ADAL for Cordova"
cordova-plugin-nativestorage 2.3.2 "NativeStorage"
cordova-plugin-network-information 2.0.2 "Network Information"
cordova-plugin-printer 0.8.0 "Printer"
cordova-plugin-screen-orientation 3.0.2 "Screen Orientation"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-vibration 3.1.1 "Vibration"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-plugin-zip 3.1.0 "cordova-plugin-zip"
cordova-sqlite-storage 3.2.1 "Cordova sqlite storage plugin - cordova-sqlite-storage plugin version"
cordova.plugins.diagnostic 5.0.0 "Diagnostic"
es6-promise-plugin 4.2.2 "Promise"
this.httpClient.request(req).retry(2).subscribe(event => {
if (event instanceof HttpResponse) {
let file = new Blob([event.body as BlobPart], {type: 'image/png'});
}
}
,
(err: HttpErrorResponse) => {
this.logProvider.writeLog("ERROR: method saveBgImage in AddMediaProvider class ", err);
});2 posts - 2 participants
Anyone know, How to debug android in app purchases?
IAP works only in release version. But in release versiondebug mode turned off.
I tried add
<application android:debuggable="true" />
But when I upload my test version to Google Play, error appears:
“Please disable debug mode in your app. More info on: https://developer.android.com/studio/publish/preparing.html#publishing-configure”
I use this plugin https://purchase.cordova.fovea.cc/use-cases/non-consumable-android#8-prepare-test-accounts
Ionic version 3
Cordova 8
1 post - 1 participant
Hi, I have recently upgraded my application from Ionic 3 to Ionic 4. I have successfully been able to recreate most of my application on the android version and it is working completely fine. but when I am testing the IOS version none of the API request calls that are made with custom headers are working correctly. for example this is an API request call I am making:
import {throwError as observableThrowError, Observable} from 'rxjs';
import {catchError, map} from 'rxjs/operators';
import {Component, ViewChild} from '@angular/core';
import {Injectable} from '@angular/core';
import {HttpClient, HttpHeaders, HttpRequest} from '@angular/common/http';
import {env} from '../env/env';
import {ToastController, IonApp, NavController} from '@ionic/angular';
import 'rxjs/add/operator/toPromise';
import {NavigationExtras} from '@angular/router';
import { Storage } from '@ionic/storage';
@Injectable()
export class ApiService {
private userID: string;
private userNotification: string;
private userDetails: string;
private userToken: string;
constructor(
public storage: Storage,
private http: HttpClient,
public toastCtrl: ToastController,
public appCtrl: NavController,
// public device: Device
) {
}
checkIfUserExists(mobile) {
return this.http.get(`${env.baseApiUrl}/CheckUser/${mobile}`, {}).pipe(
catchError(this.handleError)).toPromise();
}
This is being implemented as so:
this.loadingCtrl.create({
message: 'Sending code ...'
}).then((res) => {
res.present();
// Check if the user already exists
this.ApiService.checkIfUserExists(this.user.mobile)
.then((r: any) => {
res.dismiss();
// User exists. Prompt login
const alert = this.alertCtrl.create({
header: 'Mobile Number Exists',
message: 'There is an account associated with the mobile number you\'ve entered. Navigate to Login?',
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
},
{
text: 'Ok',
handler: () => {
const navigationExtras: NavigationExtras = {queryParams: {val: 'init'}};
this.navCtrl.navigateRoot('/login', navigationExtras);
}
}
]
});
alert.present();
})
.catch(e => {
// No User. Continue
this.origCode = Math.floor(1000 + Math.random() * 9000);
console.log(this.origCode);
this.ApiService.sendVerificationCode(this.user.mobile, this.origCode)
.then(r => {
this.signupState = state;
res.dismiss();
})
.catch(e => {
res.dismiss();
this.ApiService.showToast('Error sending verification code.');
});
});
});
I have already included the following in my config.xml:
<allow-navigation href="*" />
<access origin="*" />
This is the error I receive from the above implementation:
[Error] Unhandled Promise rejection: – "Network request failed" – "; Zone:" – "<root>" – "; Task:" – "Promise.then" – "; Value:" (2)
TypeError: Network request failed — vendor.js:125431(anonymous function) — fetch.js:499(anonymous function) — zone.js:188(anonymous function) — zone.js:503timer — zone.js:3034
(anonymous function) (cordova.js:1540)
(anonymous function) (polyfills.js:4009)
handleUnhandledRejection (polyfills.js:4032)
_loop_1 (polyfills.js:4023)
(anonymous function) (polyfills.js:4027)
drainMicroTaskQueue (polyfills.js:3927)
(anonymous function) (polyfills.js:3826)
invokeTask (polyfills.js:4990)
globalZoneAwareCallback (polyfills.js:5016)
[Error] Origin null is not allowed by Access-Control-Allow-Origin.
[Error] XMLHttpRequest cannot load due to access control checks.
[Error] ERROR – TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable. — vendor.js:124032
TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable. — vendor.js:124032subscribeTo — subscribeTo.js:28subscribeToResult — subscribeToResult.js:15(anonymous function) — catchError.js:43(anonymous function) — Subscriber.js:79(anonymous function) — Subscriber.js:59(anonymous function) — Subscriber.js:79(anonymous function) — Subscriber.js:59(anonymous function) — OuterSubscriber.js:13(anonymous function) — InnerSubscriber.js:18(anonymous function) — Subscriber.js:59onError — http.js:1757onInvokeTask — core.js:28110(anonymous function) — zone.js:188(anonymous function) — zone.js:503invokeTask — zone.js:1671globalZoneAwareCallback — zone.js:1697
defaultErrorLogger (vendor.js:42843)
(anonymous function) (vendor.js:42891)
next (vendor.js:67400)
(anonymous function) (vendor.js:64232)
(anonymous function) (vendor.js:113498)
(anonymous function) (vendor.js:113436)
(anonymous function) (vendor.js:113382)
(anonymous function) (vendor.js:113359)
(anonymous function) (vendor.js:113125)
(anonymous function) (vendor.js:64214)
(anonymous function) (polyfills.js:3462)
onHandleError (vendor.js:66871)
(anonymous function) (polyfills.js:3510)
(anonymous function) (polyfills.js:3822)
invokeTask (polyfills.js:4990)
globalZoneAwareCallback (polyfills.js:5016)
[Error] Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. (4088021903, line 0)```
Any help would be greatly appreciated.1 post - 1 participant
I am nearly finished with a new app, but need to see what my desktop icon looks like – at least on Android. I’ve put the icon.png file in resources/android/icon.png and run ionic cordova resources android -i. Then to build the app and load it on my android phone (which is plugged in to my computer), I do ionic build --prod && npx cap sync && npx cap open android.
From Android Studio, I build it and run it. It is successfully downloaded to my phone, but the icon on the desktop still looks like the ionic icon – not my new icon.
Should this work? Or do I have to build an apk as in https://ionicframework.com/docs/deployment/play-store and then move the apk to my phone somehow?
Or, is there a better way to see what the icon will look like on my phone?
If this answer is somewhere in the docs, please just point me to it. thanks.
Vic
3 posts - 2 participants
I am using ionic react ,
After using ionic-native/web-server in react it gives type error , after finding solutions in GitHub for this plugin , they says to use plain javascript, how to implement this in react ionic.
Any comments would be extremely helpful I have been struggling since ages.
1 post - 1 participant
Hi Team,
How to implement heat map charts using ionic, chart js will support Heat map chart?
How to implement Amcharts using ionic?
Thanks in Advance.
1 post - 1 participant
I have enabled Google Maps for IOS and Add this line in config.xml
<preference name="GOOGLE_MAPS_IOS_API_KEY" value="MY_API_KEY" />
Is there any solution for me?
Thanks in advance
3 posts - 2 participants