this.fcm.onNotification().subscribe(data => {
if(data.wasTapped){
this.router.navigate(['/detail'])
} else {
this.router.navigate(['/detail'])
};
});
it’s working in background and foreground when app not killed , but when app killed i received notification i click it but he don’t navigate to page detail
2 posts - 2 participants
Please help me, dose anyone can give an example (vue-cookies or axios …)
i don’t see the example in ionic document 
1 post - 1 participant
Hi everyone Im working on a PWA which contains slider and Im using ionic slides to achieve that.
Everything works fine with slides but I have a problem which I couldn’t solve,
I need to get the active index of slides when page loads before user does anything more.
I realized that I can only get index AFTER page is loaded with events like after swiping slides
by user.
I tried different lifecycle hooks and none of them works.
So i tried “ionSlidesDidLoad” event and it returns wrong index
my .html
<ion-slides #theSlides [options]="slideOpts" id="peerSlide" (ionSlidesDidLoad)="ionSlidesDidLoad(theSlides)">
<ion-slide *ngFor="let peer of peers;let i = index">
<img id="{{'x' + i}}" class="peerIcon" >
</ion-slide>
</ion-slides>
<img class="nextIcon" src="../../assets/imgs/nextIcon/nextIcon@3x.png" (click)="moveToNext(theSlides)">
<img class="prevIcon" src="../../assets/imgs/prevIcon/prevIcon@3x.png" (click)="moveToPrev(theSlides)">
my .ts code
@ViewChild('theSlides' , { static: true }) theSlides: IonSlides
moveToNext(slides) {
slides.slideNext()
//HERE GETACTIVEINDEX RETURNS CORRECT INDEX!
slides.getActiveIndex().then((index: number) => {
var value = this.peers[index]
})
}
moveToPrev(slides) {
slides.slidePrev();
//HERE GETACTIVEINDEX RETURNS CORRECT INDEX!
slides.getActiveIndex().then((index: number) => {
var value = this.peers[index]
})
ionSlidesDidLoad(slides) {
//HERE RETURNS 1 EVERY TIME EVEN WHEN MY ARRAY HAS 1 ELEMENT AND IT SHOULD BE 0
slides.getActiveIndex().then(
(index:number) => {
var value = this.peers[index]
}
)
}
so when ionSlidesDidLoad event fires getActiveIndex returns 1 even when the peers array has 1 element so this.peers[index] will be “undefined”
can you tell me whats wrong and how can I get the active index of slider when page loads?
Best regards
1 post - 1 participant
When I try to record and upload a video to the server, I’m getting The resource doesn’t support the specified Http Verb error. I have ***** for all headers on the API end. But no use. Please help me out this.
thank you
here is the code.
import { Component, ViewChild } from '@angular/core';
import { File } from '@ionic-native/file';
import { normalizeURL } from 'ionic-angular';
import { Base64 } from '@ionic-native/base64';
import { MediaCapture, MediaFile, CaptureError, CaptureVideoOptions } from '@ionic-native/media-capture';
import { VideoEditor, CreateThumbnailOptions } from '@ionic-native/video-editor';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
import { NavController, AlertController, LoadingController } from 'ionic-angular';
const baseUrl = "here my URL"
const MAX_FILE_SIZE = 5 * 1024 * 1024;
const ALLOWED_MIME_TYPE = "video/mp4";
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
videoPath: string;
thumbnail;
uploadPercent: number = 0;
videoFileUpload: FileTransferObject;
loader;
isUploading: boolean = false;
// selectedVideo: string;
@ViewChild('myvideo') myVideo: any;
constructor(public navCtrl: NavController, private transfer: FileTransfer, public file: File, public mediaCapture: MediaCapture, public base64: Base64,
private videoEditor: VideoEditor,
private alertCtrl: AlertController, private loadingCtrl: LoadingController) {
}
record() {
const options: CaptureVideoOptions = {
limit: 1,
quality:0
// portraitOverlay: 'assets/img/camera/overlay/portrait.png',
// landscapeOverlay: 'assets/img/camera/overlay/landscape.png'
}
this.mediaCapture
.captureVideo(options)
.then(async (res: MediaFile[]) => {
console.log(res[0].fullPath)
this.videoPath = res[0].fullPath;
let video = this.myVideo.nativeElement;
video.src = this.videoPath;
// alert('video path...'+this.videoPath)
// this.createThumbnail(res[0].fullPath);
var filename = this.videoPath.substr( this.videoPath.lastIndexOf('/') + 1);
var dirpath = this.videoPath.substr(0, this.videoPath.lastIndexOf('/') + 1);
dirpath = dirpath.includes("file://") ? dirpath : "file://" + dirpath;
// this.presentAlert('filename....',filename)
// alert('dirpath....'+dirpath)
try {
var dirUrl: any = this.file.resolveDirectoryUrl(dirpath);
var retrievedFile: any = this.file.getFile(dirUrl, filename, {});
} catch (err) {
this.dismissLoader();
return this.presentAlert("Error", "Something went wrong.");
}
// this.selectedVideo = retrievedFile.nativeURL;
// retrievedFile.file(data => {
// this.dismissLoader();
// if (data.size > MAX_FILE_SIZE) {
// return this.presentAlert("Error", "You cannot upload more than 5mb.");
// }
// if (data.type !== ALLOWED_MIME_TYPE) {
// return this.presentAlert("Error", "Incorrect file type.");
// }
// this.selectedVideo = retrievedFile.nativeURL;
// });
})
.catch(err => console.log('Something went wrong', JSON.stringify(err)));
}
createThumbnail(videodata) {
// creating thimbnail code
let thumbnailoption: CreateThumbnailOptions = {
fileUri: videodata,
quality: 100,
atTime: 1,
outputFileName: 'thumbnailImage',
}
this.videoEditor.createThumbnail(thumbnailoption).then((thumbnailPath) => {
console.log("Thumbnail Responce =>", thumbnailPath)
this.thumbnail = 'file://' + thumbnailPath;
// this.thumbnail = normalizeURL(this.thumbnail);
// alert('path....>>>'+ this.thumbnail)
this.base64.encodeFile(this.thumbnail).then((base64File: string) => {
console.log('base64........' + base64File);
this.thumbnail = base64File
alert('path....>>>' + base64File)
}, (err) => {
console.log('base64........' + err);
alert('base64....>>>' + err)
});
}).catch((err) => {
console.log("Thumbnail Responce Error=>", err)
alert('Error....' + err)
})
}
cancelUpload() {
this.videoFileUpload.abort();
this.uploadPercent = 0;
}
uploadVideo() {
// var url = baseUrl + "/video/upload";
this.isUploading = true;
// alert('path....'+this.selectedVideo)
var filename = this.videoPath.substr(this.videoPath.lastIndexOf('/') + 1);
// alert('name....'+filename)
// alert('selectedVideo....'+this.selectedVideo)
var options: FileUploadOptions = {
fileName: filename,
fileKey: "video",
mimeType: "video/mp4",
httpMethod:"PUT",
headers: {
//my headers here
}
}
this.videoFileUpload = this.transfer.create();
this.videoFileUpload.upload(this.videoPath, baseUrl, options)
.then((data) => {
this.uploadPercent = 0;
this.isUploading = false;
return JSON.parse(data.response);
})
.then((data) => {
// this.uploadedVideo = data.url;
this.presentAlert("Success", "Video upload was successful.");
})
.catch((err) => {
this.isUploading = false;
this.uploadPercent = 0;
this.presentAlert("Error", "Error uploading video."+JSON.stringify(err));
});
this.videoFileUpload.onProgress((data) => {
this.uploadPercent = Math.round((data.loaded / data.total) * 100);
});
}
presentAlert(title, message) {
let alert = this.alertCtrl.create({
title: title,
subTitle: message,
buttons: ['Dismiss']
});
alert.present();
}
showLoader() {
this.loader = this.loadingCtrl.create({
content: 'Please wait...'
});
this.loader.present();
}
dismissLoader() {
this.loader.dismiss();
}
}
2 posts - 2 participants
I have a problem with ion-nav component. In my UI I have a modal with an entry point for all my app. There is an internal navigation showing different pages (signin, signup, password-recovery …). All of this works fine. But the problem is: when I put an ion-input inside any page inside the ion-nav it doesn’t work properly. For example, the clearInput icon does not appear. Also, I have imported Angular Material in the project, and the same thing happens with the mat-form-field as well. They render and work perfectly in the entire app except within the ion-nav component.
Out of ion-nav all works fine
But inside ion-nav it doesn’t work properly
1 post - 1 participant
hi, even though my app is served by ionic serve, ionic build --prod fails with the error in the post’s title, this is what I get with ionic info:
<pre>
<b>Ionic:</b>
Ionic CLI : 6.12.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 4.11.10
@angular-devkit/build-angular : 0.803.28
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.3.28
@ionic/angular-toolkit : 2.2.0
<b>Capacitor:</b>
Capacitor CLI : 1.4.0
@capacitor/core : 1.4.0
<b>Cordova:</b>
Cordova CLI : not installed
Cordova Platforms : not available
Cordova Plugins : not available
<b>Utility:</b>
cordova-res : not installed
native-run : not installed
<b>System:</b>
NodeJS : v10.19.0 (/usr/bin/node)
npm : 6.14.8
OS : Linux 5.4
</pre>
any helps is appreciated
1 post - 1 participant
I have created the function to save and record and stop the recording, but it does not work, it creates the file but does not store the recording, the file weighs 0B.
I use a xiaomi mobile with android 10.
I have the following code
startRecord() {
if (this.platform.is('ios')) {
this.fileName = 'record' + new Date().getDate() + new Date().getMonth() + new Date().getFullYear() + new Date().getHours() + new Date().getMinutes() + new Date().getSeconds() + '.mp3';
this.filePath = this.file.documentsDirectory.replace(/file:\/\//g, '') + this.fileName;
this.audio = this.media.create(this.filePath);
} else if (this.platform.is('android')) {
this.fileName = 'record'+new Date().getDate()+new Date().getMonth()+new Date().getFullYear()+new Date().getHours()+new Date().getMinutes()+new Date().getSeconds()+'.mp3';
this.filePath = this.file.externalDataDirectory.replace(/file:\/\//g, '') + this.fileName;
this.audio = this.media.create(this.filePath);
this.audio.startRecord();
}
this.recording = true;
}
stopRecord() {
this.base64.encodeFile(this.filePath).then(
(base64: any) => {
let dataAudio = base64.substr(34, base64.length);
let x = base64.substr(13, base64.length);
x = "data:audio/mpeg;base64" + x;
console.log("base64",x);
this.dataAudios.push(this.sanitizer.bypassSecurityTrustUrl(x));
this.dataUpload.push(dataAudio);
}, err=>{
console.log("base64 err", err);
});
this.recording = false;
}
Additional Information
Ionic:
Ionic CLI : 5.4.16 (/usr/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 5.3.5
@angular-devkit/build-angular : 0.1000.8
@angular-devkit/schematics : 10.0.8
@angular/cli : 10.0.8
@ionic/angular-toolkit : 2.3.3
Cordova:
Cordova CLI : 10.0.0
Cordova Platforms : android 9.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 18 other plugins)
Utility:
cordova-res : 0.15.1
native-run (update available: 1.2.2) : 0.2.9
System:
Android SDK Tools : 26.1.1 (/root/Android/Sdk)
NodeJS : v12.19.0 (/usr/bin/node)
npm : 6.14.8
OS : Linux 4.15
1 post - 1 participant
Hello everyone,
I’m trying to find out what the default way is to showing ionicons in Ionic Vue. Im unable to use them when trying to import and also when using them inside other components (like icons inside input field or buttons).
What packages do I need, aside from “@ionic/vue”, or is that enough?
Looking forward to a reply.
With kind regards,
Nathan
1 post - 1 participant
Ionic version:
4.x
5.3.3
Current behavior:
No matter what i do, there is no way to make iOS Simulator load the custom fonts.
I’ve tested everything I’ve found across different Ionic versions and all platforms and the current setup works perfectly in Google Chrome Browser, Safari Browser, Android Device and Android Emulator but not in iOS Simulator (could not test it in iOS Device since i don’t have one yet).
No custom font dependent component is shown except when commenting its font styling (second image).
Expected behavior:
Fonts loaded correctly like in any other tested platform: Image reference
Steps to reproduce:
ionic cordova build ios
Related code:
global.scss (with repeated styling just to test if its correctly loaded only from certain sources)// http://ionicframework.com/docs/theming/
@import '~@ionic/angular/css/core.css';
@import '~@ionic/angular/css/normalize.css';
@import '~@ionic/angular/css/structure.css';
@import '~@ionic/angular/css/typography.css';
@import '~@ionic/angular/css/padding.css';
@import '~@ionic/angular/css/float-elements.css';
@import '~@ionic/angular/css/text-alignment.css';
@import '~@ionic/angular/css/text-transformation.css';
@import '~@ionic/angular/css/flex-utils.css';
@import '~animate.css/animate.min';
@font-face {
font-family: "Gotham";
src: local('GothamMedium'), local('GothamMedium'),
url('assets/GothamMedium.eot') format('embedded-opentype'),
url('assets/GothamMedium.woff2') format('woff2'),
url('assets/GothamMedium.woff') format('woff'),
url('assets/GothamMedium.ttf') format('truetype'),
url('assets/GothamMedium.svg#GothamMedium') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Gotham";
src: local('GothamBold'), local('GothamBold'),
url('assets/GothamBold.eot') format('embedded-opentype'),
url('assets/GothamBold.woff2') format('woff2'),
url('assets/GothamBold.woff') format('woff'),
url('assets/GothamBold.ttf') format('truetype'),
url('assets/GothamBold.svg#GothamBold') format('svg');
font-weight: bold;
font-style: normal;
}
@mixin font($weight, $size: false, $shadow: false, $align: false) {
font-family: "Gotham" !important;
font-weight: $weight;
@if $weight==regular {
@if $shadow {
text-shadow: 1px 1px 1px #aaaa;
}
}
@if $weight==bold {
@if $shadow {
text-shadow: 1px 2px 4px #aaaa;
}
}
@if $size {
font-size: $size !important;
}
@if $align {
text-align: $align !important;
}
}
//...
/*:root[mode=ios] .gotham,
:root[mode=md] .gotham{
--ion-font-family: 'Gotham' !important;
font-family: 'Gotham' !important;
}*/
}
.subtitulo {
@include font(normal, 3.5vw, false, center);
margin: auto !important;
}
ion-card-title,
h1 {
top: -10px;
@include font(bold, 9vw, true);
color: var(--ion-color-primary);
}
variables.scss
// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/
/** Ionic CSS Variables **/
:root {
// --ion-font-family: "GothamMedium", "Roboto";
// font-family: var(--ion-font-family) !important;
--ion-font-family: 'Gotham' !important;
font-family: 'Gotham' !important;
//... other non-related theming variables
}
fonts.scss (i was going to deprecate it if the globals.scss code block functioned correctly, or the inverse). I do use mixins to make styling faster.
@font-face {
font-family: "Gotham";
src: local('GothamMedium'), local('GothamMedium'),
url('../assets/GothamMedium.eot') format('embedded-opentype'),
url('../assets/GothamMedium.woff2') format('woff2'),
url('../assets/GothamMedium.woff') format('woff'),
url('../assets/GothamMedium.ttf') format('truetype'),
url('../assets/GothamMedium.svg#GothamMedium') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Gotham";
src: local('GothamBold'), local('GothamBold'),
url('../assets/GothamBold.eot') format('embedded-opentype'),
url('../assets/GothamBold.woff2') format('woff2'),
url('../assets/GothamBold.woff') format('woff'),
url('../assets/GothamBold.ttf') format('truetype'),
url('../assets/GothamBold.svg#GothamBold') format('svg');
font-weight: bold;
font-style: normal;
}
@mixin font($weight, $size: false, $shadow: false, $align: false) {
font-family: "Gotham" !important;
font-weight: $weight;
@if $weight==regular {
@if $shadow {
text-shadow: 1px 1px 1px #aaaa;
}
}
@if $weight==bold {
@if $shadow {
text-shadow: 1px 2px 4px #aaaa;
}
}
@if $size {
font-size: $size !important;
}
@if $align {
text-align: $align !important;
}
}
angular.json{
"$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
"version": 1,
"defaultProject": "app",
"newProjectRoot": "projects",
"projects": {
"app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "www",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "src/assets/",
"output": "assets/"
},
{
"glob": "**/*.woff2",
"input": "src/assets/",
"output": "assets/"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
}
],
"styles": [
{
"input": "src/theme/fonts.scss"
},
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
},
//...
package.json{
"name": "app",
"version": "0.1.0",
"author": "",
"homepage": "",
"scripts": {
"ng": "ng",
"start": "ng serve --host 0.0.0.0",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"android:dev": "ionic cordova run android --external --debug",
"android:prod": "ionic cordova run android -l --ssl --external --prod",
"ios:dev": "ionic cordova run ios --prod",
"ios:prod": "ionic cordova run ios -l --ssl --external --prod",
},
"private": true,
"dependencies": {
"@angular/common": "^10.1.5",
"@angular/core": "^10.1.5",
"@angular/forms": "^10.1.5",
"@angular/platform-browser": "^10.1.5",
"@angular/platform-browser-dynamic": "^10.1.5",
"@angular/router": "^10.1.5",
"@ionic-native/bluetooth-serial": "^5.28.0",
"@ionic-native/core": "5.22.0",
"@ionic-native/device": "^5.28.0",
"@ionic-native/diagnostic": "^5.28.0",
"@ionic-native/firebase-x": "^5.26.0",
"@ionic-native/in-app-browser": "^5.26.0",
"@ionic-native/native-storage": "^5.26.0",
"@ionic-native/splash-screen": "5.22.0",
"@ionic-native/status-bar": "^5.22.0",
"@ionic/angular": "^5.0.4",
"@ionic/storage": "^2.2.0",
"@keyframes/core": "^2.0.10",
"@teamhive/lottie-player": "^1.0.0",
"animate.css": "^3.7.2",
"cordova": "^10.0.0",
"cordova-android-firebase-gradle-release": "^4.0.0",
"cordova-plugin-bluetooth-serial": "^0.4.7",
"cordova-plugin-device": "^2.0.3",
"cordova-plugin-enable-multidex": "^0.2.0",
"cordova-plugin-inappbrowser": "^4.0.0",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^5.0.0",
"cordova-plugin-nativestorage": "^2.3.2",
"cordova-plugin-splashscreen": "^5.0.3",
"cordova-plugin-statusbar": "^2.4.3",
"cordova-plugin-whitelist": "^1.3.4",
"core-js": "^3.6.4",
"firebase": "^7.14.5",
"howler": "^2.1.3",
"keyframes": "^2.3.0",
"lodash": "^4.17.19",
"native-run": "^1.0.0",
"ng-payment-card": "0.0.8",
"npm-check-updates": "^4.0.4",
"rxjs": "^6.5.4",
"zone.js": "^0.10.2"
},
"devDependencies": {
"@angular-devkit/architect": "^0.900.5",
"@angular-devkit/build-angular": "^0.1001.6",
"@angular-devkit/core": "^10.1.6",
"@angular-devkit/schematics": "^10.1.6",
"@angular/cli": "^10.1.6",
"@angular/compiler": "^10.1.5",
"@angular/compiler-cli": "^10.1.5",
"@angular/language-service": "^10.1.5",
"@ionic/angular-toolkit": "^2.2.0",
"@ionic/lab": "^3.1.6",
"@types/jasmine": "^3.5.8",
"@types/jasminewd2": "^2.0.8",
"@types/lodash": "^4.14.149",
"@types/node": "^13.7.7",
"codelyzer": "^5.2.1",
"cordova-android": "^9.0.0",
"cordova-ios": "^6.1.1",
"cordova-plugin-androidx": "^2.0.0",
"cordova-plugin-androidx-adapter": "^1.1.1",
"cordova-plugin-firebasex": "10.2.0-cli",
"jasmine-core": "^3.5.0",
"jasmine-spec-reporter": "^4.2.1",
"karma": "^4.4.1",
"karma-chrome-launcher": "^3.1.0",
"karma-coverage-istanbul-reporter": "^2.1.1",
"karma-jasmine": "^3.1.1",
"karma-jasmine-html-reporter": "^1.5.2",
"protractor": "^5.4.3",
"ts-node": "^8.6.2",
"tslint": "~6.1.0",
"typescript": "^4.0.3"
},
"description": "Crucijuegos Salas App",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-local-notification": {},
"cordova-plugin-background-mode": {},
"cordova-plugin-nativestorage": {},
"cordova-android-firebase-gradle-release": {
"FIREBASE-CORE": "17.0.0",
"FIREBASE-ADS": "18.0.0",
"FIREBASE-ANALYTICS": "17.0.0",
"FIREBASE-APPINDEXING": "19.0.0",
"FIREBASE-AUTH": "18.0.0",
"FIREBASE-FIRESTORE": "20.0.0",
"FIREBASE-FUNCTIONS": "18.0.0",
"FIREBASE-MESSAGING": "19.0.0",
"FIREBASE-STORAGE": "18.0.0",
"FIREBASE-CRASH": "16.2.1",
"CRASHLYTICS": "2.10.1",
"FIREBASE-DYNAMIC-LINKS": "18.0.0",
"FIREBASE-INVITES": "17.0.0",
"FIREBASE-INAPPMESSAGING": "18.0.1",
"FIREBASE-INAPPMESSAGING-DISPLAY": "18.0.1",
"FIREBASE-ML-VISION": "21.0.0",
"FIREBASE-ML-VISION-IMAGE-LABEL-MODEL": "18.0.0",
"FIREBASE-ML-VISION-FACE-MODEL": "18.0.0",
"FIREBASE-ML-VISION-OBJECT-DETECTION-MODEL": "17.0.0",
"FIREBASE-ML-NATURAL-LANGUAGE": "20.0.0",
"FIREBASE-ML-NATURAL-LANGUAGE-LANGUAGE-ID-MODEL": "20.0.0",
"FIREBASE-ML-NATURAL-LANGUAGE-TRANSLATE-MODEL": "20.0.0",
"FIREBASE-ML-NATURAL-LANGUAGE-SMART-REPLY-MODEL": "20.0.0",
"FIREBASE-ML-MODEL-INTERPRETER": "20.0.0",
"FIREBASE-ML-VISION-AUTOML": "17.0.0",
"FIREBASE-PERF": "18.0.0",
"FIREBASE-DATABASE": "18.0.0",
"FIREBASE-CONFIG": "18.0.0"
},
"cordova-plugin-enable-multidex": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-ble-central": {
"BLUETOOTH_USAGE_DESCRIPTION": " "
},
"cordova-plugin-bluetooth-serial": {},
"cordova-plugin-firebasex": {
"FIREBASE_ANALYTICS_COLLECTION_ENABLED": "true",
"FIREBASE_PERFORMANCE_COLLECTION_ENABLED": "true",
"FIREBASE_CRASHLYTICS_COLLECTION_ENABLED": "true"
}
},
"platforms": [
"ios",
"android"
]
}
}
Ionic info:
74-80-245-21:cruci-app user922954$ ionic info
Ionic:
Ionic CLI : 6.11.12 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.3.3
@angular-devkit/build-angular : 0.901.12
@angular-devkit/schematics : 9.1.12
@angular/cli : 9.1.12
@ionic/angular-toolkit : 2.3.3
Cordova:
Cordova CLI : 10.0.0
Cordova Platforms : ios 6.1.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 15 other plugins)
Utility:
cordova-res : 0.15.1
native-run (update available: 1.2.2) : 1.1.0
System:
ios-sim : 8.0.2
NodeJS : v12.16.2 (/usr/local/bin/node)
npm : 6.14.4
OS : macOS Catalina
Xcode : Xcode 12.0.1 Build version 12A7300
⟩ ionic info
Ionic:
Ionic CLI : 6.11.8 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.3.3
@angular-devkit/build-angular : 0.1001.6
@angular-devkit/schematics : 10.1.6
@angular/cli : 10.1.6
@ionic/angular-toolkit : 2.3.3
Cordova:
Cordova CLI : 10.0.0
Cordova Platforms : android 9.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 16 other plugins)
Utility:
cordova-res : not installed
native-run (update available: 1.2.2) : 1.1.0
System:
Android SDK Tools : 26.1.1 (/home/praetors/Android/Sdk/)
NodeJS : v12.13.0 (/home/praetors/.nvm/versions/node/v12.13.0/bin/node)
npm : 6.12.0
OS : Linux 4.19
2 posts - 2 participants
My project’s ionic tab bar has custom icons, but when I compile for ios, the icons only appear when the page is selected.
Notes: On android it works perfectly.
Here are some images below to illustrate my problem
My code tab bar:
Does anyone know how I can solve? Thank you
1 post - 1 participant
I’m trying to create a media viewer lightbox using IonModal and IonSlides, however when placing an image in a slide, it is not naturally zoomable (pinch-to-zoom). There are a number of really old posts that mention placing the image in a component called IonScroll, which has a “zoom” prop, but that doesn’t seem to exist anymore, or at least not in the React version.
Is there a current or updated approach to this problem?
1 post - 1 participant
i am trying to implement dbltab and longpress using hammer in vue 3.
the doc and the behavior of directives are not the same.
the doc shows bind/unbind, but it looks like created/destroyed are the new terms.
the doc says I will get a ‘this’ pointer, but don’t at created time.
my directives need mouse interaction, but the method I supplied on the v-press="…" gets called, LONG before the created: directive invocation…
my component
<template>
<ion-content>
<ion-row v-for="(row,i) in data[info.Type+'s']" :key="row+'.Name'"
v-dbltap="addeditClicked(2,i,info.Type,'edit')"
v-press="deleteRow(i,info.Type)" >
<ion-col v-for="(field) in info.Fields" :key="field.Name" :size="field.width" class = " colb center " @click="setClickedRow(i,info.Type,field.Name)" >
<ion-list v-if="field.Name=='Tags'" >
<ion-item v-for="(id,i) of row[field.Name]" :key="i" class = " colb center ">
{{tagfromID(id)}}
</ion-item>
</ion-list>
<ion-list v-else-if="field.Name=='Type'">
<ion-item v-for="(id,i) of row[field.Name]" :key="i" class = " colb center ">
{{id}}
</ion-item>
</ion-list>
<span v-else>
<span v-if="field.Name=='Source'" class = " colb center ">
{{datasourcefromID(row[field.Name])}}
</span>
<span v-else class = " colb center ">
{{row[field.Name]}}
</span>
</span>
</ion-col>
</ion-row>
</ion-content>
</template>
<script >
import { IonContent, IonRow, IonCol,IonList, IonItem } from '@ionic/vue';
export default{
name: 'Content',
components: { IonContent, IonRow, IonCol , IonList, IonItem },
props: {
info: { type: Object,
name: {
type: String,
default: function () {
return 'Sample'
}
},
fields: {
type: Array,
default: function() {
return [{Name: 'Test', width: 10}]
}
}
},
data: {
type:Object,
default: function() {
return {}
}
}
},
directives:{
dbltap: {
created:function(x){
console.log("dbltap created")
console.log("parms="+JSON.stringify(this,' ',2))
},
bind: function(){
console.log("dbltap bind called")
},
unbind: function(){
console.log("dbltap unbind called")
}
},
press:{
created: function(x){
console.log("press created")
console.log("parms="+JSON.stringify(this,' ',2))
},
unbind: function(){
console.log("press unbind called")
}
},
},
methods:{
tagfromID (x){
for(const tag of this.data.Tags){
if(tag.id == x) {
return tag.Value
}
}
return x+' not found'
},
datasourcefromID (x){ console.log("datasource fromid clicked ="+x);
for(const datasource of this.data.DataSources){
if(datasource.id == x)
return datasource.Name
}
return x+' not found'
},
addeditClicked(mode, row, type, imageName){ console.log("addedit clicked mode="+mode+" type="+type+" returning imagename="+imageName);return imageName},
deleteRow(x){ console.log("delete row directive called="+x); return},
setClickedRow(index, type, field){console.log("setClickedRow clicked index="+index+" type="+type+" field="+field); return}
}
}
</script>
and the console log on page initial draw
there should be ONE call to created for press and dbltap for each ion-row
dbltap means edit row, press means delete
getselected clicked type=Tag
ContentComponent.vue?8673:100 addedit clicked mode=2 type=Tag returning imagename=edit
ContentComponent.vue?8673:101 delete row directive called=0
ContentComponent.vue?8673:100 addedit clicked mode=2 type=Tag returning imagename=edit
ContentComponent.vue?8673:101 delete row directive called=1
ContentComponent.vue?8673:100 addedit clicked mode=2 type=Tag returning imagename=edit
ContentComponent.vue?8673:101 delete row directive called=2
ContentComponent.vue?8673:100 addedit clicked mode=2 type=Tag returning imagename=edit
ContentComponent.vue?8673:101 delete row directive called=3
ContentComponent.vue?8673:100 addedit clicked mode=2 type=Tag returning imagename=edit
ContentComponent.vue?8673:101 delete row directive called=4
ContentComponent.vue?8673:100 addedit clicked mode=2 type=Tag returning imagename=edit
ContentComponent.vue?8673:101 delete row directive called=5
ContentComponent.vue?8673:63 dbltap created
ContentComponent.vue?8673:64 parms=undefined
ContentComponent.vue?8673:75 press created
ContentComponent.vue?8673:76 parms=undefined
ContentComponent.vue?8673:63 dbltap created
ContentComponent.vue?8673:64 parms=undefined
ContentComponent.vue?8673:75 press created
ContentComponent.vue?8673:76 parms=undefined
ContentComponent.vue?8673:63 dbltap created
ContentComponent.vue?8673:64 parms=undefined
ContentComponent.vue?8673:75 press created
ContentComponent.vue?8673:76 parms=undefined
ContentComponent.vue?8673:63 dbltap created
ContentComponent.vue?8673:64 parms=undefined
ContentComponent.vue?8673:75 press created
ContentComponent.vue?8673:76 parms=undefined
ContentComponent.vue?8673:63 dbltap created
ContentComponent.vue?8673:64 parms=undefined
ContentComponent.vue?8673:75 press created
ContentComponent.vue?8673:76 parms=undefined
ContentComponent.vue?8673:63 dbltap created
ContentComponent.vue?8673:64 parms=undefined
ContentComponent.vue?8673:75 press created
ContentComponent.vue?8673:76 parms=undefined
HeaderComponent.vue?f983:50 getselected clicked type=Tag
ContentComponent.vue?8673:100 addedit clicked mode=2 type=Tag returning imagename=edit
ContentComponent.vue?8673:101 delete row directive called=0
ContentComponent.vue?8673:100 addedit clicked mode=2 type=Tag returning imagename=edit
ContentComponent.vue?8673:101 delete row directive called=1
ContentComponent.vue?8673:100 addedit clicked mode=2 type=Tag returning imagename=edit
ContentComponent.vue?8673:101 delete row directive called=2
ContentComponent.vue?8673:100 addedit clicked mode=2 type=Tag returning imagename=edit
ContentComponent.vue?8673:101 delete row directive called=3
ContentComponent.vue?8673:100 addedit clicked mode=2 type=Tag returning imagename=edit
ContentComponent.vue?8673:101 delete row directive called=4
ContentComponent.vue?8673:100 addedit clicked mode=2 type=Tag returning imagename=edit
ContentComponent.vue?8673:101 delete row directive called=5
1 post - 1 participant
I am using ion-content and it’s scroll methods in the Ionic react.
I want to update the header based on the scroll.I am using onIonScroll to detect the scrollY position. in which I passed handleScroll function
I also want to navigate to a specific point with scrollToPoint method.
The issue I am facing is I have some code to update the header for in handleScroll, but when I call scrollToPoint this scroll function handleScroll is called internally and updates the value.
I want to detect when the function is called by user action and when the function is called from handle scroll
1 post - 1 participant
Hey everyone,
I am having a trouble when I try to use cordova camera plugin in my application.
Actually, I’ve tried to give permissions to the application using https://ionicframework.com/docs/native/android-permissions but this gives me Has permission? false and although I am trying to concede permissions, this is not working.
I’ve also installed cordova-camera-plugin, as I told you before, but debugging gives me:
vendor.js:85402 Native: tried calling Camera.getPicture, but the Camera plugin is not installed.
pluginWarn @ vendor.js:85402
vendor.js:85408 Install the Camera plugin: 'ionic cordova plugin add cordova-plugin-camera'
Although I’ve removed and added the platform again this is still not working.
Some help would be appreaciated.
Thanks in advance.
1 post - 1 participant
Dear diary…
I watched this talk by Mike Hartington and Neil Manvar on Real time application monitoring for Ionic Apps with Sentry
I’m using the same Make file as per Mike’s git repo which is an app that deliberately throws errors.
When I execute the file, I can see that the Sourcemaps are being created, uploaded and linked to my releases but I’m not getting the stack traces on the errors.
I cloned the Sentry-React-Ionic project and committed it to my own repo, then also set it up on my Sentry account to see if I get the same results as I am getting with my project.
The results: Neither project gives stack traces when running it locally with “ionic serve” but when deployed to the device, the Sentry-React-Ionic app links it’s Sourcemaps correctly but mine, as mentioned, are not.
Sentry-React-Ionic App error
with the stack trace.
My error message
The first difference that I noticed is that my error is referencing a chunk, and not the tsx file.
with the stack trace, which is useful, but not all that useful.
So, finally, the question. As both projects’ Sourcemaps are generated and uploaded in the same way but yielding different results, where else should I be looking to troubleshoot this?
1 post - 1 participant
Hi people,
in Ionic 5 I use ion-alert and when this comps are rendered I see <button> tag instead <ion-button>.
So, why Ionic don’t use Ionic comps for button?
Or there’s a way to use (that I don’t know).
Thanks in adv
Al
2 posts - 2 participants
I’m trying to access the shared iCloud Keychain in my Ionic application, but it’s not working.
I have another MacOS app that writes some data under this path:
com.app.keychain.token
And these data are available and shared within another iOS app of mine, so the iCloud keychain works.
Now I’m trying to connect it to a third Ionic app. In Xcode I have enabled SignIn&Capabilities > Keychain Sharing > KeychainGroup as com.myAccount (same as in the iOS and MacOS apps), and then wrote this code
import { Keychain } from '@ionic-native/keychain/ngx';
let keychainId = 'com.app.keychain'
let keychainTokensId = 'token'
let keychain = new Keychain()
console.log(keychainId+'.'+keychainTokensId)
keychain.get(keychainId+'.'+keychainTokensId)
.then(value => console.log('Got value', value))
.catch(err => console.error('Error getting', err));
But it always returns null. (I’ve tested on a real device with the correct AppleId and some data under that keychain path)
NB: in my iOS and MacOS app the Keychain Group (com.myAccount) differs from the path I use to store the data (com.app.keychain.token), I don’t know if this may cause some problem, anyway on iOS-MacOS keychain sharing works.
What am I missing?
Thanks
1 post - 1 participant
When trying to call multiple handlers with same priority using processNextHandler, returning the void error stated below
Argument of type '(processNextHandler: any) => void' is not assignable to parameter of type '() => void | Promise<any>'
any fix for this?
1 post - 1 participant
I’m trying to use the Composition API with Ionic Vue but it’s throwing an error when trying to compile. The error is coming from the use-song-list.ts and the errors I’m getting are
Type 'Ref<never[]>' is missing the following properties from type 'never[]': length, pop, push, concat, and 28 more.
Type 'Ref<null>' is not assignable to type 'null'.
Type 'Ref<boolean>' is not assignable to type 'boolean'.
What am I doing wrong? Why can’t I assign the response, error and fetching constants to the songs object properties?
Below is my code.
Tab1.vue
<script lang="ts">
import {
IonPage,
IonHeader,
IonToolbar,
IonTitle,
IonContent,
IonList,
IonItem,
} from "@ionic/vue";
import { reactive } from "vue";
import useSongList from "./../composables/use-song-list";
export default {
name: "Tab1",
components: {
IonHeader,
IonToolbar,
IonTitle,
IonContent,
IonPage,
IonList,
IonItem,
},
setup() {
const { list, error, fetching } = useSongList();
return {
list,
error,
fetching,
};
},
};
</script>
useSongList.ts
import { reactive, Ref, toRefs } from 'vue';
import useFetch from './use-fetch';
export default function () {
let songs = reactive({ list: [], error: null, fetching: false });
const { response, error, fetchData, fetching } = useFetch("ENDPOINT_CHANGED", {});
fetchData();
// This is where the errors are happening.
songs.list = response;
songs.error = error;
songs.fetching = fetching;
return { ...toRefs(songs) };
}
fetchData.ts
import { reactive, Ref, toRefs } from 'vue';
export default function (endpoint: RequestInfo, options: Object) {
const state = reactive({
response: [],
error: null,
fetching: false
});
const fetchData = async () => {
state.fetching = true;
try {
const res = await fetch(endpoint, options);
const json = await res.json();
state.response = json;
} catch (errors) {
state.error = errors;
} finally {
state.fetching = false;
}
};
return { ...toRefs(state), fetchData };
}
1 post - 1 participant
hi when running ionic Cordova build android I am having this error
any help, please
FAILURE: Build failed with an exception.
Could not find com.google.firebase:firebase-messaging:15.0.0…
Searched in the following locations:
file:/C:/platform-tools/extras/m2repository/com/google/firebase/firebase-messaging/15.0.0./firebase-messaging-15.0.0…pom
file:/C:/platform-tools/extras/m2repository/com/google/firebase/firebase-messaging/15.0.0./firebase-messaging-15.0.0…jar
file:/C:/platform-tools/extras/google/m2repository/com/google/firebase/firebase-messaging/15.0.0./firebase-messaging-15.0.0…pom
file:/C:/platform-tools/extras/google/m2repository/com/google/firebase/firebase-messaging/15.0.0./firebase-messaging-15.0.0…jar
file:/C:/platform-tools/extras/android/m2repository/com/google/firebase/firebase-messaging/15.0.0./firebase-messaging-15.0.0…pom
file:/C:/platform-tools/extras/android/m2repository/com/google/firebase/firebase-messaging/15.0.0./firebase-messaging-15.0.0…jar
https://maven.google.com/com/google/firebase/firebase-messaging/15.0.0./firebase-messaging-15.0.0..pom
https://maven.google.com/com/google/firebase/firebase-messaging/15.0.0./firebase-messaging-15.0.0..jar
https://jcenter.bintray.com/com/google/firebase/firebase-messaging/15.0.0./firebase-messaging-15.0.0..pom
https://jcenter.bintray.com/com/google/firebase/firebase-messaging/15.0.0./firebase-messaging-15.0.0..jar
https://repo1.maven.org/maven2/com/google/firebase/firebase-messaging/15.0.0./firebase-messaging-15.0.0..pom
https://repo1.maven.org/maven2/com/google/firebase/firebase-messaging/15.0.0./firebase-messaging-15.0.0..jar
Required by:
project :app
1 post - 1 participant