Hi, I’m new to the ionic environment and I’m looking around trying to learn and I just wanted to know if I already have a vuejs or reactjs app if I want to inject ionic into it do I imperatively need to use the ionic components or can I leave my components with my custom CSS. And is it hard to add ionic on a already built spa with Vue or react?
Thanks
1 post - 1 participant
Hello,
I am facing the issue while uploading the IOS app to the test flight, it got rejected please help me to solve the issue. I also use the grep command to fine UIWebView but don’t know what to do next.
“@ionic-native/in-app-browser”: “^5.27.0”,
“@ionic-native/social-sharing”: “^5.27.0”,
“cordova-admob-sdk”: “^0.24.1”,
“cordova-ios”: “^5.1.1”,
“cordova-plugin-admob-free”: “^0.27.0”,
“cordova-plugin-inappbrowser”: “^4.0.0”,
“cordova-plugin-wkwebview-engine”: “^1.2.1”
1 post - 1 participant
hello in ionic 5 I want when user dubble click on back button hardware exit from app
this code not work, I use cordova…
thanks…
1 post - 1 participant
FCM: has been created
FCMPlugin.js:26 FCM: Ready!
vendor-es2015.js:103665 Ionic Native: deviceready event fired after 1 ms
vendor-es2015.js:103970 Native: tried calling FCM.getToken, but the FCM plugin is not installed.
pluginWarn @ vendor-es2015.js:103970
vendor-es2015.js:103976 Install the FCM plugin: ‘ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated’
???
its not given me the token
any help?
1 post - 1 participant
Hello,
I’m just getting started developing with Ionic (also generally a noob developer), and I’m having a problem using the storage module.
I started writing an app using the Tabs template and tried to follow the instructions for configuring storage here: https://ionicframework.com/docs/angular/storage
This is what my app.module.ts looks like:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicStorageModule } from '@ionic/storage';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, IonicStorageModule.forRoot],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
I’m getting the following TS error:
Error:(15, 69) TS2322: Type ‘(storageConfig?: StorageConfig) => ModuleWithProviders’ is not assignable to type ‘any | Type | ModuleWithProviders<{}>’.
Property ‘ngModule’ is missing in type ‘(storageConfig?: StorageConfig) => ModuleWithProviders’ but required in type ‘ModuleWithProviders<{}>’.
(My IDE is PHPStorm, its Linter is also hinting at a problem with IonicStorageModule.forRoot)
Here’s my tab2.page.ts:
import { Component } from '@angular/core';
import {Storage} from "@ionic/storage";
@Component({
selector: 'app-tab2',
templateUrl: 'tab2.page.html',
styleUrls: ['tab2.page.scss']
})
export class Tab2Page {
constructor() {}
zeichenButtonVisible = true;
zeichenInputVisible = false;
rundenButtonVisible = true;
rundenInputVisible = false;
oderVisible = true;
showZeichenInput = () => {
this.zeichenInputVisible = true;
this.zeichenButtonVisible = false;
this.rundenInputVisible = false;
this.rundenButtonVisible = true;
this.oderVisible = false;
}
showRundenInput = () => {
this.rundenInputVisible = true;
this.rundenButtonVisible = false;
this.zeichenInputVisible = false;
this.zeichenButtonVisible = true;
this.oderVisible = false;
}
// constructor(private storage: Storage) {}
//
// setStorage(){
// this.storage.set('numPlayers', '0');
// }
//
// readStorage() {
// this.storage.get('numPlayers').then((val)) => {
//use value for number of player name fields shwon in next tab
// }
// }
}
and this is the page’s html:
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Spiel-Einstellungen
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-input autofocus="true" clear-input="true" inputmode="numeric" type="number">
Zahl der Spieler:
</ion-input>
<ion-item>Geschichtenlänge:</ion-item>
<ion-item id="zeichen-button" *ngIf="zeichenButtonVisible" (click)="showZeichenInput()">
<ion-button>
Anzahl Zeichen
<ion-icon name="arrow-forward-circle-outline"></ion-icon>
</ion-button>
</ion-item>
<ion-input id="zeichen-input" *ngIf="zeichenInputVisible" clear-input="true" inputmode="numeric" value="2000" type="number">Anzahl Zeichen</ion-input>
<ion-item *ngIf="oderVisible">oder</ion-item>
<ion-item id="runden-button" *ngIf="rundenButtonVisible" (click)="showRundenInput()">
<ion-button>
Anzahl Runden
<ion-icon name="arrow-forward-circle-outline"></ion-icon>
</ion-button>
</ion-item>
<ion-input id="runden-input" *ngIf="rundenInputVisible" clear-input="true" inputmode="numeric" type="number">Anzahl Runden</ion-input>
<ion-button [routerLink]="['/tab3']">Speichern</ion-button>
</ion-content>
I’m guessing, I’ve just not completed the configuration yet, but I’m kinda lost right now.
I haven’t understood from the documentation: Is Storage configured for the whole app, or do I need to inject it into every page that stores data? Which files do the configurations go into?
Sorry for all the noob questions, thanks for any hints!
1 post - 1 participant
Hi!
I need to add and automatic video recording button to my app.
Example:
If I click on a button or call a function, it should record automatically for 10 seconds.
And now im trying to do this with : https://ionicframework.com/docs/native/media-capture
My problem is that this open the camera app, but not record automatically, u should clik on record button and finish button.
There is a way to record automatically?
Thanks!
1 post - 1 participant
Hi,
I’m using Ionic 5, Angular 9.1.6, Capacitor 2.2.0 and I’m using Firebase Database and Storage to save photos.
I can do a CRUD correctly in Database, but, I cannot fetch photos in Storage.
Access to fetch at ‘image_url’ from origin ‘http://localhost:4200’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
My photos in Firebase Storage are inside a folder called “icons”.
Firebase Storage has public rules:
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write;
}
}
}
My firebase.json:
{
"hosting": [
{
"target": "app",
"public": "www",
"ignore": [
"**/.*"
],
"headers": [
{
"source": "*.[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f].+(css|js)",
"headers": [
{
"key": "Cache-Control",
"value": "public,max-age=31536000,immutable"
}
]
}
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
]
}
How can I fix this? This is the first time I’m facing this specific issue.
1 post - 1 participant
Hello there,
Hope you are doing well.
With regards, we are developing a hybrid video news android app(from our app: we are going to distribute the hyperlocal video news feed to end-users in short 15-20 seconds video format only).
For the above, we are looking to integrate Video player which supports HLS streaming and the technologies we are using to develop the Hybrid Android App are:
Ionic, Angular JS, Node JS & MySQL
Does this player mentioned in this link: https://github.com/frontyard/cordova-plugin-exoplayer supports HLS streaming with hybrid android app(Ionic, Angular Js, Node JS & MySQL)?
Please guide me
Will wait to hear from you
Thanks & Regards
Kumar Vansh Moondra
1 post - 1 participant
hi
I have a page where given a select to the user he can switch the leaflet map I show.
After a initial leaflet map load, my problem is when i want to refresh the map.
I always get “Map container is already initialized”:
My Code
ionViewDidEnter() {
this.loadmap();//خواندن نقشه
}
//نشان دادن نقشه
loadmap() {
this.map = leaflet.map("map").fitWorld();//ایجاد نقشه
// استفاده از نقشه ایرانی
leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
//attributions: 'www.tphangout.com',
maxZoom: 18//سایز نمایش نقشه
}).addTo(this.map);
// تابع مشخص کردن لوکیشن خود
if (this.offOnLocationFlag) {
//this.myLoc();
} else {
}
if (this.myLocFlag) {
this.myLocFlag = false;
this.myLoc();
}
//کلیک برروی نقشه و گرفتن مشخصات
this.clickMap();
if (this.latF) {
this.latF = false;
let marker: any = leaflet.marker([this.lat, this.lng], { icon: this.selfIcon });
this.map.addLayer(marker);
this.temploc = marker;
this.map.flyTo([this.lat, this.lng], 16);//نمایش محل موقعیت
}
}
1 post - 1 participant
How can I remove paddings from start and end of ion-tab-bar?
HTML
<ion-tabs>
<ion-tab-bar class="myTabs" slot="bottom">
<ion-tab-button tab="groups">
<ion-icon name="chatbubbles-outline"></ion-icon>
<ion-label>Chat</ion-label>
</ion-tab-button>
<ion-tab-button tab="settings">
<ion-icon name="settings-outline"></ion-icon>
<ion-label>Pengaturan</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
CSS
.myTabs {
--background: #f1c40f;
}
.tab-has-label {
--background: none;
--color-selected: #2c3e50;
--color: #718093;
}
.tab-selected {
--background: #e1b12c;
}
Any idea?
1 post - 1 participant
Hello,
I transform my pwa in Capacitor App (with quasar) , I use auth0 authentification , and I must set https. It’s worked ,I can login. But I relaunch application , I have a problem cookie :
A cookie associated with a cross-site resource at https://xxxx.eu.auth0.com/ was set without the SameSite attribute. It has been blocked,
My pwa use paypal , and i have the same problem :
A cookie associated with a cross-site resource at https://paypal.com/ was set without the SameSite attribute. It has been blocked
any idea ?
1 post - 1 participant
Hello everyone,
i cannot build an android apk for 2 days. I did not change anything of my sourcecode.
When i try to build or try to create resources i get this error:
HTTP Error 503: POST https://res.ionic.io/api/v1/upload
Trying update the ionic cli leads to several other problems.
Will the server get online again?
2 posts - 2 participants
Hello there,
Hope you are doing well.
With regards, we are developing a hybrid video news android app(from our app: we are going to distribute the hyperlocal video news feed to end-users, only video content).
For the above, we are looking to integrate Exoplayer(video player) and the technologies we are using to develop the Hybrid Android App are:
Ionic, Angular JS, Node JS & MySQL
My question is: Does Exoplayer support with Ionic Framework & other technologies we are using?
Will wait to hear from you
Thanks & Regards
Kumar Vansh Moondra
1 post - 1 participant
Hi All, how can I integrate razor pay payment gateway in ionic capacitor project.
there is a cordova plugin for that but i need to implement for ionic capacitor project
please help
thanks
1 post - 1 participant
hey guys ! account kit is not available now . so someone can tell me to an alternative ?
1 post - 1 participant
Emoji picker with slides and tabs (like emoji picker on Whatsapp) for Ionic 4 & Ionic 5
1 post - 1 participant
How can I remove the bottom red border of the ion-input that appears when you click on it? It appears only if you click on the input, and stays there even if you click on the second input.
Only appears while using Android and Web. On iOS it’s not visible, which is good for me.
This is a new app and this red border seems to be a default behavior, but, why? Why it’s there? I couldn’t find an easy way to remove this.
<ion-content>
<ion-list>
<form>
<ion-item>
<ion-label position="fixed">Email</ion-label>
<ion-input type="email" required>
</ion-input>
</ion-item>
<ion-item>
<ion-label position="fixed">Password</ion-label>
<ion-input type="password" required>
</ion-input>
</ion-item>
</form>
</ion-list>
</ion-content>
I have tried a few solutions that I have found out there for Ionic 4, but, no luck so far.
Any help would be appreciated.
Thanks for all.
2 posts - 1 participant
Hi,
Hoping you can help? I am trying to create an app for my club. The idea is to store tutorial videos on Firebase storage and then call them as and when they are needed. I have been going round in circle for about a week now. I can get the player to work fine with a generic URL but as soon as I substitute it for the URL from firebase I get an error.
GET http://localhost:8100/[object%20Promise] net::ERR_ABORTED 404 (Not Found)
Uncaught (in promise) DOMException: Failed to load because no supported source was found.
Any ideas where I’m going wrong?
getvid3(){
this.res = firebase.storage().ref(‘Poomsae’).child(‘Poomsae1K.mp4’).getDownloadURL().then(res => console.log(res));
this._videoPlayer.initPlayer({mode: ‘fullscreen’, url: this.res});
}
}
1 post - 1 participant
I installed Native Storage
npm install cordova-plugin-nativestorage
npm install @ionic-native/native-storage
ionic cap sync
but now when I run
this.storage.getItem('user').then((d) => {console.log(d); return d;});
in the browser it fails with
ERROR Error: Uncaught (in promise): cordova_not_available
?
In my ionic3 version of the app that I am porting to 5 I was able to run native storage / a storage in the browser.
1 post - 1 participant
Version details:
ionic version - “6.10.1”,
ionic-angular: “3.9.9”
Issue description:
On click photo or upload photo button to open a popup(I’m using ActionSheetController for popup) for capture image from gallery or using a camera,
then after click on the device’s back button to back on the last or previous page and it goes on the last or previous page but the popup is still open, it cants close.
I want to close the popup and then back the last or the previous page.
1 post - 1 participant
