Hi,
I am looking for help with my project. I am building a sports tracking app and have issues with
graphql client-server communication and background geolocation in Angular. I am willing to pay for your time.
I need help with:
1 post - 1 participant
I got this error every time I try to build, I’m using the latest Xcode Beta version:
The following build commands failed:
CompileC /… /x86_64/YoutubeVideoPlayer.o /… /Plugins/cordova-plugin-youtube-video-player/YoutubeVideoPlayer.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)
Any solution or clue about this?
1 post - 1 participant
What is the best, up to date method for uploading file(s) (image, video; 1 or even 1+ files per upload) to server via http.post()? Is http.post() even the best option?
I’m using Ionic 5, Cordova 9, and Angular. I can’t find a reliable up to date tutorial, the docs are absolutely horrid (maybe I’m wrong), and nothing I’ve tried has been able to work for me.
If you need information for what I’ve tried, environment info, more details, I have an additional forum post that was “too long” here: Forum Post
Thanks for any help.
2 posts - 2 participants
I’m building a chat application. And I have a problem that’s got me a little bit upset.
I always have a leftover iOS autocorrector in the chat ion-textarea. Every time a word has a correction suggestion and I hit the button to send the message. The blue hover remains in the textarea.
How can I fix this?
Look at the images so you can see what’s going on
1 post - 1 participant
Good day! I am trying to use Ionic Native HTTP for requesting API data to Server. I also want to get Authorization Token that stored in Ionic Storage. Below are my code
import { HelperService } from './helper.service';
import { HTTP, HTTPResponse } from '@ionic-native/http/ngx';
import { Storage } from '@ionic/storage';
constructor(private helper: HelperService, private nativeHttp: HTTP, private storage: Storage) {}
deleteShipping(shipping): Promise<HTTPResponse>{
this.shipping.forEach(result => {
if(shipping.id === result.id){
this.shipping = [];
}
})
let headers: {};
this.storage.get(this.helper.TOKEN_KEY).then(token => {
headers = {
'Authorization': 'Bearer '+ token
};
})
return this.nativeHttp.delete(this.helper.API_URL+'/user/shipping/'+shipping.id, {}, headers);
}
When im trying to delete, it fails. because the headers is empty. the server blocked the request because there is no token from the request. Any help would be appreciated. Thank you.
1 post - 1 participant
Here is how I load my files without having those long paths => ‘…/…/…/…/folder’
Go to tsconfig.json and add your paths
"compilerOptions": {
"baseUrl": "./",
.........
"paths": {
"@app/*": ["src/app/*"],
"@environments/*": ["src/environments/*"],
}
},
For example in my _helpers folder I have
index.ts // This file is important
http.interceptor.ts
jwt.interceptor.ts
app.initializer.ts
.....
Index.ts has the following code;
export * from './app.initializer';
export * from './jwt.interceptor';
export * from './http.interceptor';
....
To load them now without the long path name is easy and quick.
So this…
import { JwtInterceptor } from './../../_helpers/jwt.interceptor';
import { HttpInterceptor } from './../../_helpers/http.interceptor';
......
Becomes …
import { JwtInterceptor, HttpInterceptor } from '@app/_helpers';
Happy coding 
1 post - 1 participant
Hello,
Navigation from (onclick) event using this.router.navigateByUrl(‘login’); changes route, but component not being rendered. After second click on any part of screen, component is rendered.
thanks
1 post - 1 participant
I have a pwa application deployed to firebase. Why must we clear cache to see the changes? Is there any way without clearing the cache?
1 post - 1 participant
I am working on Ionic Document scanner Plugin in Ionic 4.
After the scan, image is saved in Gallery, However i do not get return value from Plugin.
Below is my code
let opts: DocumentScannerOptions = {
quality: 100,
sourceType: srcType,
returnBase64 :true
};
this.documentScanner.scanDoc(opts) .then((res) => {
alert(res); // No alert coming
if (this.useURI) {
this.imageData = (window as any).Ionic.WebView.convertFileSrc(res);
} else { this.imageData = ‘data:image/jpeg;base64,’ + res;
}
}) .catch((error: any) => alert(error));
1 post - 1 participant
I have 3 buttons (Note: I have tried the same with other elements like 3 texts/labels/etc.)
first button should be at start (leftmost side of the screen),
second button should be at the middle of screen
3rd button should be at the end (rightmost side of the screen)
I was trying using class=“ion-justify-content-between”, but problem remains the same.
Here is screenshot :
Here is code :
<ion-card>
<ion-card-content>
<ion-item>
<ion-grid>
<ion-row class="ion-justify-content-between">
<ion-col >
<div>
<ion-button>ok</ion-button>
</div>
</ion-col>
<ion-col >
<div>
<ion-button>ok</ion-button>
</div>
</ion-col>
<ion-col>
<div>
<ion-button>ok</ion-button>
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
</ion-card-content>
</ion-card>
[Note: you can also try without ion-card/ion-card-content/ion-item. I mean you can just keep the ion-grid and the problem is same]
Someone please tell me what went wrong?
1 post - 1 participant
EDIT: Trying this: https://masteringionic.com/blog/2018-02-06-dynamically-add-and-remove-form-input-fields-with-ionic/
I don’t know the proper terms to describe what i need to do so i can’t find the correct posts to help, so here it goes:
I have a request form that has a preset number of fields to fill out (from, to, date, time) and once submitted a bunch of firebase functions are triggered to pass the data to sendgrid email, sending a confirmation to the user and a quote request to the admins.
Right now everything is explicitly laid out as in the form fields are named and then passed to the function upon hitting submit.
My new hurdle is adding an unknown amount of additional requests to the form and saving them appropriately in firestore. So someone can fill out from, to, date, time, then click “Another Request” which will cause a new empty form to show below the one they filled in and allow them to enter a completely new set of from, to, date and time. Upon submitting the information both requests get filed under the same firestore document with the first one have “1” after the field names ( from1, to1, date1, time1) and the 2nd one having "2"s after (from2, to2, date2, time2). This would continue up until about 5 requests which then i would block additional ones from being added.
Currently i was just going to duplicate the entirety of the form, give all the field names a “2” at the end, and then have an *ngIf watch for if they click the “Another Request” button. But then i would have to have logic on all subsequent pages checking for if a 2, 3, 4 and 5 request count exist for each main request.
I’m using ionic 5 and firebase firestore.
TL:DR : Current form is setup to take 4 named fields and submit them to firestore collection/document. I would like to setup logic for the user to be able to add another form (the 4 same fields) but dynamically create the fields in the database grouped under a main ID (so i’m not creating a form with the same 4 fields repeating 5 times, and then having to track 5 sets of the variables in the database when most of them will be blank). Then subsequent pages that use these fields can just query the main ID, see how many sets of requests there are, and show the data in a list style loop.
1 post - 1 participant
I have a toggle switch that subscribes a user to notifications on the backend.
When they turn the ion-toggle on, I go register them on the server. If anything fails, I turn the toggle back “off” programmatically in the component.
This triggers the ionChange event which unsubscribes on the server. If this fails, it turns the toggle back “on” programmatically.
This behavior is similar to iOS when you turn something like WiFi Calling or iMessage on, iOS sometimes does the neat little spinner next to the toggle to let the user know something is being “confirmed” on the backend.
There’s probably a combination of changing the event to maybe ionBlur or changing ngModel bindings but I can’t figure it out.
<ion-toggle
color="danger"
[(ngModel)]="villageCheckinNotifications"
(ionChange)="toggleVillageCheckinsNotifications()"
></ion-toggle>
console.log('changed value to: ', this.villageCheckinNotifications);
if (this.villageCheckinNotifications) {
this.notificationSvc.subscribeVillageCheckinNotifications().then(
() => {
// this.villageCheckinNotifications can stay true. accurately reflects state
},
(err) => {
console.error('Error setting notifications: ', err);
alert(
'Error setting notifications. Please try resetting ReVillage Notification permissions in your phones Settings.'
);
// failed to configure so we need to reset UI
this.villageCheckinNotifications = false;
}
);
} else {
this.notificationSvc.unsubscribeVillageCheckinNotifications().then(
() => {
// this.villageCheckinNotifications can stay true. accurately reflects state
},
(err) => {
console.error('Error setting notifications: ', err);
alert(
'Error setting notifications. Please try resetting ReVillage Notification permissions in your phones Settings.'
);
// failed to configure so we need to reset UI
this.villageCheckinNotifications = true;
}
);
}
}
Anyone smarter than me able to figure this out? 
1 post - 1 participant
Hello,
I have an issue with an almost-empty Ionic Capacitor project. Actually, I’ve seen this issue on many projects created using Ionic.
When the user focuses an Input, the keyboard opens animating up, and I would expect the content to be pushed up by the keyboard, animating smoothly with it. What happens is that the keyboard animates but the content just jumps up when the keyboard has fully opened, instead of following the animation. The same thing happens the other way around, when the keyboard closes completely, the content just jumps down.
1 post - 1 participant
Hi, I have been watching the ionic studio for a while and I was happy as soon as it was released, but I was sad when there was no way to test it before we really decided to buy a license, but I was sad to see that it was simply deleted from the site, disappeared without leaving any justification for users, I saw some twitters saying that they are working on a new solution but I request that they be more transparent if they will abandon the project or what it will improve and what reason it has been removed, in the end I hope that it will come back and have a limited free plan so that the community can test before buying, i would love to collaborate but i need to know if it is really useful for me.
1 post - 1 participant
I have Ionic-5 (angular 9) App with users chat, i want to add mentions functionality to the ion-textarea,
its need to be something like Whatsup, twitter ,Facebook when user typing ‘@’ or ‘#’ its will open dropdown with the users list with names and avatars, and when continue typing the list will be filtered and show the relevant users. when click on user from the list the keyboard stay opened and its name will be add to the textarea
is there ionic5/angular9 recommended libraries for mentions? or should i have to write it myself?
1 post - 1 participant
who is Looking for the company proving the best service for database management services
1 post - 1 participant
Hi All,
Am new into ionic development, my manager asked me to upgrade an existing App of ours from ionic 3 to 5. Its a quite big application, my doubt is can i upgrade directly from ionic 3 to 5 or should i go as like from 3 to 4 and then 4 to 5?
3 posts - 2 participants
Hello,
On my Ionic app, I get the following error:
Cannot match any route. URL Segment: 'user-profile/edit/[userId]
when trying to go from “user-profile/[userId]” to “user-profile/edit/[userId]” page.
I can’t acces the said page when entering the route manually either.
My “user-profile-routing.module.ts” looks like so:
const routes: Routes = [
{
path: "id",
component: UserProfilePage,
},
{
path: "edit/:id",
component:EditProfilePage
},
{
path:"prizes-list/:id",
component: PrizesListPage
},
{
path: "add-prize/:id",
component: AddPrizePage
},
{
path: "stats/:id",
component: StatsPage
},
];
I have the same type of structure in another page which go from “message” page to “message/messages-details/[messageId]” page and have no problem navigating between the two:
const routes: Routes = [
{
path: '',
component: MessagesPage
},
{
path: "messages-details/:id",
component: MessagesDetailsPage
},
];
What am I missing in my routing module to make it works? Thx for the help !
1 post - 1 participant
I am using capacitor browser API to open a window but the problem is it is opening new tab not staying on the current tab. How to prevent this?
Thank you in advance
Here is the code
import { Plugins } from '@capacitor/core';
const { Browser } = Plugins;
async test(){
await Browser.open({url : 'http://localhost:8100/tabs/tab2'});
}
HTML
<ion-button (click)="test()">test</ion-button>
1 post - 1 participant