Facing issue with Camera on Ionic Framework Version 6.18.1 with Android Target API Level 33 on Android 13. Camera returns Error no 20 on Android 13 with API Level 33 and it works fine with Android 13 with Target API level 31.
1 post - 1 participant
↧
Facing issue with Camera on Ionic Framework Version 6.18.1 with Android Target API Level 33 on Android 13
↧
Webview load url domain, with app Ionic
Hello, it is possible that in my ionic app, internally in the webview that uses ionic, it loads a url, after giving it a button.
That is, do not use the Browser plugin, but internally load a website in the native webview
1 post - 1 participant
↧
↧
Modal does not recognize directives
App ionic v7, capacitor 5, angular 15. From a parent page, I invoke a modal form in a child page. Both parent.module and child.module import CommonModule (@angular/common). This solution has always worked, it started having problems of not recognizing ngIf, ngFor… after updating plugins that were mandatory. This problem only occurs on the modal controller, on other pages everything works correctly.
Can you help me?
Monica
1 post - 1 participant
↧
Capacitor IOS Status Bar Overflow App
Hi,
I am having trouble with the IOS status bar. I would like to have a background color on the status bar, like black background and white text.
This is how it seems with BrowserStack with iPhone 12 Pro
Not expected Result
Expected Result
I have tried many things that doesnt have worked (maybe i’ve implemented bad some ones):
- –ion-safe-area-top: env(safe-area-inset-top);
@awesome-cordova-plugins/status-bar/ngx;@capacitor/status-bar.hide() when Platform ready- checking content=“viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”
- playing with ion-header classes like ion-padding, ion-border
- taking off
<key>UIStatusBarHidden</key><key>UIViewControllerBasedStatusBarAppearance</key>
in my index html I have this meta. its seems like doesnt do anything
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
The header is a component called menu that is called in main.page html in this way
<app-menu></app-menu>
<app-header></app-header>
<ion-content class="content" [fullscreen]="true">
<ion-router-outlet></ion-router-outlet>
</ion-content>
</div>
<ion-tabs>
...
</ion-tabs>
this is menu.component.html
<ion-menu side="start" contentId="main-content">
<ion-content>
<ion-list>
....
</ion-list>
</ion-content>
</ion-menu>
this is my menu.compoent.html
<ion-header class="ion-padding">
<ion-toolbar>
<ion-buttons slot="start">
....
</ion-buttons>
...
</ion-toolbar>
</ion-header>
Ionic -v 7.1.1
please, any suggestions? what should I try?
3 posts - 2 participants
↧
iOS show questions mark instead of images when uploading from iPhone 14 max pro
On iOS devices, specifically on the iPhone 14 PRO MAX, when uploading an image to my app, it shows a question mark on the timeline instead of the image.
It is supposed to show the image where the question mark is (it also works properly with all Android devices)
I have tested the same issue on the iPhone SE and iPad mini 6th, and I don’t have that problem there, but only with the iPhone 14 Pro Max (and it could be another version as well, but I dont have the actual devices to test it with). All devices have been updated to the new iOS 17
Does anyone know of any solution to this?
1 post - 1 participant
↧
↧
Ionic tabs don't fit on Android physical devices but fit on emulators and iPhones
Hi,
I am migrating an old ionic angular App. I have the App running on iPhones and both iPhone emulator through Xcode and Android emulator through Android Studio. But when I deploy that to Android physical device from the same Android Studio, the ionic tabs don’t fit in the tab bar on the Android physical device. I have 7 tabs and about half a tab on each side gets cut off with 5 showing in between. I have tried this on a Samsung 22 phone and also on an old Xiaomi device - both have the same problem.
I have tried to search around for this issue but couldn’t find anything so far.
My ionic info output is below
Ionic:
Ionic CLI : 7.1.1 (/Users/username/.nvm/versions/node/v20.2.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.6.1
@angular-devkit/build-angular : 12.2.18
@angular-devkit/schematics : 12.2.18
@angular/cli : 12.2.18
@ionic/angular-toolkit : 5.0.3
Capacitor:
Capacitor CLI : 3.9.0
@capacitor/android : 3.9.0
@capacitor/core : 3.9.0
@capacitor/ios : 3.9.0
Cordova:
Cordova CLI : 12.0.0 (cordova-lib@12.0.1)
Cordova Platforms : android 9.1.0, browser 6.0.0, ios 6.2.0
Cordova Plugins : cordova-plugin-ionic-webview 4.2.1, (and 5 other plugins)
Utility:
cordova-res : 0.15.4
native-run (update available: 1.7.3) : 1.7.1
System:
ios-sim : 8.0.2
NodeJS : v20.2.0 (/Users/username/.nvm/versions/node/v20.2.0/bin/node)
npm : 9.6.6
OS : macOS Unknown
Xcode : Xcode 15.0 Build version 15A240d
Android Studio is Giraffe 2022.3.1 Build #AI-223.8836.35.2231.10406996, built on June 28, 2023
Not quite sure how to address/fix this issue. Appreciate any help/pointers.
Thanks,
Sanjay.
1 post - 1 participant
↧
Geolocation error on windows build
Hi, i am using @capacitor/geolocation to get the longitude and latitude of the user’s location. Here is the code
import * as CapacitorGeolocation from “@capacitor/geolocation”
CapacitorGeolocation?.Geolocation?.getCurrentPosition().then((coordicates: any) => { console.log(coordicates)
}).catch((err) => {console.log(err)}). ?
It is working fine on android device But throwing error on windows build made with electron.
I used following code to check permissions in windows build
CapacitorGeolocation?.Geolocation?.checkPermissions().then(res => {console.log(“Res”, res)}).catch(err => {console.log(“Err”, err)})
it responds with following
{
“location”: “granted”,
“coarseLocation”: “granted”
}
I am getting the following error in windows build
{
code:2
message:Network location provider at ‘https://www.googleapis.com/’ : ERR_HTTP_RESPONSE_CODE_FAILURE.
proto:
- PERMISSION_DENIED: 1
- POSITION_UNAVAILABLE: 2
- TIMEOUT: 3
}
1 post - 1 participant
↧
SithasoIONIC7 WireFrames - An Ionic 7 WireFrame App built with Vanilla JavaScript
Hi there
I have been learning Ionic for a while however I wanted to do it with vanilla javascript. I have experience with VueJS and love it, Angular, nope.
You can check it out on this YT channel.
Unboxing SithasoIonic7 Wireframes
Unboxing SithasoIonic7 WireFrames ion-content #ionic #ionic7 #javascript #mobile
This is still work in progress.
1 post - 1 participant
↧
Can I restore Appery project from backup file created using deprecated library?
Appery.io recently announced that they will soon be removing their deprecated JQM libararies (5.0, 5.1 and 5.2) from the system. I have some Appery project backup files that were created using the deprecated 5.2 library.
Will I be able to restore these projects using these backup files once the deprecated libraries are not on the system? Or will I need to recreate backup files using the 5.3 library?
Also if I am unable to convert a project to the 5.3 Appery library, will I be able to open the project on the Appery system once the deprecated libraries are removed?
1 post - 1 participant
↧
↧
No haptics for Toggle
Hi there,
I thought haptic feedback is supposed to be enabled by default for IonToggle, but I get no feedback on my iPhone.
Do I have to trigger a haptic feedback manually or did I miss something?
Cheers Jan
2 posts - 2 participants
↧
Ionic-angular app automatically logout when handling
Hello! I am facing to a really big problem that tried me 
. After creating my app it 's automatically log out and blocked when I am handling it. After checking the log within android studio I encounter this error: - Line 5381 - Msg: WebSocket connection to ‘ws://192.168.1.69:8100/ng-cli-ws’ failed: Error in connection establishment: net::ERR_CONNECTION_TIMED_OUT.
File: http://192.168.1.69:8100/polyfills.js - Line 6322 - Msg: [webpack-dev-server].
It 's looking like I am using websocket to communicate with the server but I am only doing HTTP request. Please HELP ME
1 post - 1 participant
↧
Alternatives of webSQL
Hello,
I am currently developing an application using Ionic 5 and Angular, and I’ve encountered a specific challenge. The application requires offline functionality, so we’ve implemented a SQL database (Ionic Native’s SQLite). However, when conducting tests in the browser for development or issue resolution, I’m in need of an alternative since webSQL is deprecated in Chromium.
I’ve observed that the most popular option is IndexedDB, but I am concerned about the necessity to translate all SQL statements to this non-SQL technology. I would like to know if there is an alternative that allows me to continue using the SQL statements I already have when using the browser.
Thank you!
1 post - 1 participant
↧
Geolocation not working in background despite using a foreground service (Android)
Hello,
I am using @capacitor/geolocation to get the position of the user. Here is the code:
import { ForegroundService } from '@capawesome-team/capacitor-android-foreground-service';
import { Position, Geolocation } from '@capacitor/geolocation';
async startForegroundService() {
await ForegroundService.startForegroundService({
buttons: [
{
id: 1,
title: 'Stop',
},
],
body: 'This is the body of the notification',
title: 'This is the title of the notification',
id: 12398473,
smallIcon: 'push_icon',
}).then(async () => {
this.watchId = await Geolocation.watchPosition(
{ enableHighAccuracy: true, timeout: 5000 },
(position, err) => {
if (err) {
console.log(err);
}
this.addPosition(position)
}
);
});
}
It only works when the application is in the foreground, but when I put it in the background, the callback in watchPosition is not called anymore. It works again when I go back in the application.
I also tried to use Geolocation.getCurrentPosition():
async startForegroundService() {
await ForegroundService.startForegroundService({
buttons: [
{
id: 1,
title: 'Stop',
},
],
body: 'This is the body of the notification',
title: 'This is the title of the notification',
id: 12398473,
smallIcon: 'push_icon',
}).then(async () => this.timeout());
}
timeout() {
console.log("TIMEOUT");
if (this.isCurrentRide$.getValue()) {
setTimeout(async () => {
console.log('INSIDE_TIMEOUT');
try {
const pos = await Geolocation.getCurrentPosition({ timeout: 5000 });
console.log('POS', pos);
} catch (error) {
console.error("ERROR", error);
}
this.timeout();
}, 1000);
}
}
Unlike the first method, this one is more hazardous as it does not work sometimes. But, when it does, it works correctly when the application is open but when I put it in the background, it can’t get the position anymore (until I open the application again). It continues to call getCurrentPosition() but it always returns an error saying that the position is unavailable:
ERROR Error: location unavailable
I have given all the necessary permissions:
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-feature android:name="android.hardware.location.gps" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
I am testing with an Android Studio emulator (Pixel 7, API 33).
1 post - 1 participant
↧
↧
Error updated Angular to version 17 when I compile
After I updated Angular to version 17, it is giving this error when I compile
- Building… X [ERROR] File ‘src\main.ts’ is missing from the TypeScript compilation. [plugin angular-compiler] Ensure the file is part of the TypeScript program via the ‘files’ or ‘include’ property. X [ERROR] File ‘src\polyfills.ts’ is missing from the TypeScript compilation. [plugin angular-compiler] angular:polyfills:angular:polyfills:1:7: 1 │ import ‘./src/polyfills.ts’; ╵ ~~~~~~~~~~~~~~~~~~~~ Ensure the file is part of the TypeScript program via the ‘files’ or ‘include’ property. [e[40mERRORe[49m] An error occurred while running subprocess ng. ng.cmd run app:build:production exited with exit code 1. Re-running this command with the --verbose flag may provide more information.
1 post - 1 participant
↧
How to use Ionic framework v5
I wrote a webapp back in 2020 using ionic framework. It imports the components/css via CDN. But that CDN now references v7 and my app looks really shitty. I don’t want to have to do a full update to use the newer version of ionic. I just want the app to work as it was designed.
Is there some way to install ionic v5 (a static CDN would be even better)?
Thanks!
4 posts - 3 participants
↧
Debug on Android Device not works: ERR_EMPTY_RESPONSE / ERR_CONNECTION_REFUSED
I have debug problem using my android device. I have read many posts and done many tests but I can’t solve the problem
In the past, with old version of ionic and cordova, I used debugging and loadreload mode. I am going crazy-
PS C:\projects\mgdlab\ionic\gemar-app> ionic info
Ionic:
Ionic CLI : 7.1.5 (C:\tools\nvm\v18.16.0\node_modules\@ionic\cli)
Ionic Framework : @ionic/angular 6.7.4
@angular-devkit/build-angular : 13.3.11
@angular-devkit/schematics : 12.2.18
@angular/cli : 13.3.11
@ionic/angular-toolkit : 4.0.0
Cordova:
Cordova CLI : 11.1.0
Cordova Platforms : android 11.0.0, browser 6.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 15 other plugins)
Utility:
cordova-res : not installed globally
native-run : 2.0.0
System:
Android SDK Tools : 26.1.1 (C:\Users\myuser\AppData\Local\Android\Sdk)
NodeJS : v18.16.0 (C:\Program Files\nodejs\node.exe)
npm : 9.5.1
OS : Windows 10
If I execute this command:
ionic cordova run android --device --debug
the app is loaded on the device. it works, but debugging (chrome://inspect) and live reload do not work
If I execute the same command with -l or --livereload option
ionic cordova run android -l --device --debug
the app is loaded on the device but it shows this message
ERR_EMPTY_RESPONSE / ERR_CONNECTION_REFUSED
1 post - 1 participant
↧
How to search for fractions of a word within an array in angular
With the following code I can filter the information of an array as long as the parameters sent are equal to what was evaluated within the array, now what I need to do is be able to search within the array for a fraction of some word
Within the information that the arrangement has, I save the name of each representative, let’s imagine that we have several representatives with their first name Juan, I want that when I pass the word Juan it brings me all the representatives with this name
/asignando las informaciones del localstorage al arreglo
this.signinmodel = this.localStorageService.getData('TablaRepresentantes') || [];
//Filtrar por nombre
this.data = this.signinmodel.filter(item => item.repCodigo === this.repcodigo && item.repClave === this.repclave );
1 post - 1 participant
↧
↧
New Ionic 7 Cordova project with - livereload does not work and give an error as "ERR_EMPTY_RESPONSE"
Steps to Reproduce:
I create a new angular based starter - blank - Ionic 7 project via
ionic start testapp
I then added the cordova android platform with the following command:
ionic cordova platform add android
I run the following command to do a livereload:
ionic cordova run android -l
it compile and install device successfully. But after app start splash screen have appeared then give error as following screen.
when I run the following command:
ionic cordova run android or ionic cordova run android -l --external it is work successfully. But I will use “navigator.mediaDevices” in my project. If I use --external parameter in my command, “navigator.mediaDevices” is undefined. Without -l and external parameter, “navigator.mediaDevices” is work as expected. So I need to work with ionic cordova run android -l command.
My ionic info as following:
`Ionic:
Ionic CLI : 7.1.5 (C:\Users\POLAT\AppData\Roaming\npm\node_modules\@ionic\cli)
Ionic Framework : @ionic/angular 7.5.4
@angular-devkit/build-angular : 16.2.10
@angular-devkit/schematics : 16.2.10
@angular/cli : 16.2.10
@ionic/angular-toolkit : 7.0.0
Cordova:
Cordova CLI : 12.0.0 (cordova-lib@12.0.1)
Cordova Platforms : android 12.0.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 3 other plugins)
Utility:
cordova-res : 0.15.4
native-run : 2.0.0
System:
Android SDK Tools : 26.1.1 (C:\Users\POLAT\AppData\Local\Android\Sdk)
NodeJS : v18.18.1 (C:\Program Files\nodejs\node.exe)
npm : 10.2.3
OS : Windows 10`
2 posts - 2 participants
↧
Who is caching my pwa app?
Hi,
I made a small change to my PWA app and rebuilt the files with “ionic build”, but without increasing the version number. I uploaded the new files to my app server. Then I uninstalled the app on my cell phone. I then re-entered the app address in the browser to reinstall the app. However, the installation manager keeps reinstalling the older files so that the change I made is not there. I am now asking myself: where do the old files still come from? Where can I switch off this “cashing”? Do I have to increase the version number in the angular.json file every time I make small changes so that the installation manager reloads all the files from the server?
1 post - 1 participant
↧
Android audio API Oboe with Capacitor
Dear Community,
Any clarification on if and how the Android audio API Oboe can work with Capacitor would be greatly appreciated.
1 post - 1 participant
↧