I see that Appflow’s package is currently on version 0.4.0 (@capacitor/live-updates - npm).
We are using an older version and I’d like to see a changelog to upgrade, but the Repository and Homepage links in the NPM page are broken.
Can I see the changelog somewhere? Is there an upgrade guide?
Thanks in advance.
1 post - 1 participant
Hi,
I have a capacitor ios app from my vuejs app. I am testing the app on my xcode simulator and on my phone through test flight but the swipe to go back does not work. I saw online that it was supposed to work without any config but it’s not my case. I tried to use some plugins but it still was not working. I also tried to add some code in my apple delegate but it still did not work. How can I enable this feature ?
1 post - 1 participant
I am reimplementing my Ionic+Angular+PWA app using updated versions of “everything”.
I’ve ported everything over to Ionic + Angular v.19 and worked out all the bugs.
When I do an ionic build --prod it seems to produce everything in www/browser (except for the files 3rdpartylicenses.txt and prerendered-routes.json).
When I do firebase deploy to host on firebase, it assumes everything is in www – at least that’s where my build put everything previously.
Here is my current config:
Ionic:
Ionic CLI : 7.2.0 (/Users/vtn2/.nvm/versions/node/v20.9.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.4.1
@angular-devkit/build-angular : 19.0.6
@angular-devkit/schematics : 19.0.6
@angular/cli : 19.0.6
@ionic/angular-toolkit : 12.1.1
Capacitor:
Capacitor CLI : 6.2.0
@capacitor/android : not installed
@capacitor/core : 6.2.0
@capacitor/ios : not installed
Utility:
cordova-res : not installed globally
native-run : 2.0.1
System:
NodeJS : v20.9.0 (/Users/vtn2/.nvm/versions/node/v20.9.0/bin/node)
npm : 10.1.0
OS : macOS Unknown
Here is my old config:
Ionic:
Ionic CLI : 7.2.0 (/Users/vtn2/.nvm/versions/node/v20.9.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.5.3
@angular-devkit/build-angular : 14.2.10
@angular-devkit/schematics : 14.2.10
@angular/cli : 14.2.10
@ionic/angular-toolkit : 7.0.0
Capacitor:
Capacitor CLI : 4.6.3
@capacitor/android : 4.6.3
@capacitor/core : 4.6.3
@capacitor/ios : 4.6.3
Utility:
cordova-res : not installed globally
native-run (update available: 2.0.1) : 1.7.1
System:
NodeJS : v20.9.0 (/Users/vtn2/.nvm/versions/node/v20.9.0/bin/node)
npm : 10.1.0
OS : macOS Unknown
Here is my new angular.json:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"app": {
"projectType": "application",
"schematics": {
"@ionic/angular-toolkit:page": {
"styleext": "scss",
"standalone": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "www",
"index": "src/index.html",
"polyfills": ["src/polyfills.ts"],
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
}
],
"styles": ["src/global.scss", "src/theme/variables.scss"],
"scripts": [],
"browser": "src/main.ts"
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all",
"serviceWorker": "ngsw-config.json"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
},
"ci": {
"progress": false
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "app:build:production"
},
"development": {
"buildTarget": "app:build:development"
},
"ci": {
"progress": false
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
}
],
"styles": ["src/global.scss", "src/theme/variables.scss"],
"scripts": []
},
"configurations": {
"ci": {
"progress": false,
"watch": false
}
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
}
}
}
}
},
"cli": {
"schematicCollections": ["@ionic/angular-toolkit"]
},
"schematics": {
"@ionic/angular-toolkit:component": {
"styleext": "scss"
},
"@ionic/angular-toolkit:page": {
"styleext": "scss"
},
"@angular-eslint/schematics:application": {
"setParserOptionsProject": true
},
"@angular-eslint/schematics:library": {
"setParserOptionsProject": true
}
}
}
and my firebase.json:
{
"functions": [
{
"source": "functions",
"codebase": "default",
"ignore": [
"node_modules",
".git",
"firebase-debug.log",
"firebase-debug.*.log",
"*.local"
],
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint",
"npm --prefix \"$RESOURCE_DIR\" run build"
]
}
],
"hosting": {
"public": "www",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
I’ve been looking at the old versions of these files and they seem basically the same as the new versions.
Does anyone have any idea why my stuff is being built into www/browsers, if that is correct, and if it is correct, how I get the firebase deploy to work correctly?
Thanks.
1 post - 1 participant
We have an app that downloads a lot of data for offline use. We get the size of the data before download. Is there any way to get the available free space on the device?
I have searched everywhere but I can’t find anything - I would have thought this would be simple!
1 post - 1 participant
Can I change the main.ts in Vue framework to the user to use own theme. This is the system: In the theme folder there is a file"themeConfig.json". The main.ts reads the file and gets the theme variable and sets the theme to like if the theme variable is “mytheme”, includes mytheme.css. Can you configure the file.
2 posts - 2 participants
Hello,
I don’t arrive to build/run the application on Android Studio because of the barcode-scanner package (version 1.0.2 or 1.0.4… not tried on 2.0.x).
Here is the error message I get:
Execution failed for task ':capacitor-barcode-scanner:compileDebugKotlin'.
> Inconsistent JVM-target compatibility detected for tasks 'compileDebugJavaWithJavac' (17) and 'compileDebugKotlin' (21).
1. What is it?
2. Can I solve it without upgrading to Capacitor V7 for the moment?
Thanks for your help,
Loïc
3 posts - 2 participants
Can I change or delete the tabs in the down?
on the default.
2 posts - 2 participants
I’ve got a Capacitor-built app that I’m working on and when my testers touch and drag, rather than scrolling the area, it tries to pick up the HTML element that was touched to start and acts like it’s drag-n-dropping it where none exists. There is drag-n-drop in one part of the system, but this is happening almost everywhere. Not sure how to identify the source of the issue, or where it does or doesn’t take place. Has anyone ever seen this? How did you address it? I’m running on @capacitor/core 6.2.0.
1 post - 1 participant
I have a Capacitor app that I have just recently enabled LiveUpdates for. In the app there is a section where I show the current app version based on the native version and build number, and I would like to include some kind of live update version as well for debugging purposes. Is there a way to programmatically get the current live update version the app is using? I see that the Cordova SDK has a “getCurrentVersion” method, but I don’t see something similar in the Capacitor SDK. it looks like “sync” would probably return the information I’m looking for, but I don’t want to perform a sync, I just want to read the version information (I am using the background update method and would like to keep it that way for now)
1 post - 1 participant
Hi,
Im’ just trying out Ionic 8 with Angular19.
It looks like ion-icon is not anymore working like before. I get errors like:
Ionicons Warning]: Could not load icon with name “trash-outline”. Ensure that the icon is registered using addIcons or that the icon SVG data is passed directly to the icon component. <ion-icon _ngcontent-ng-c3651251419 slot="top" name="trash-outline" class="button md" style="margin-bottom: 5px;" ng-reflect-name="trash-outline" role="img">…slot
I have to add every single icon for every componant manually. You can check it even in the tabs template. Is this a bug or a feature? Any workaround?
Thanks!
Tobias
2 posts - 2 participants
The docs for IonReorderGroup give this code:
import React, { useState } from 'react';
import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
function Example() {
const [items, setItems] = useState([1, 2, 3, 4, 5]);
function handleReorder(event: CustomEvent<ItemReorderEventDetail>) {
// Before complete is called with the items they will remain in the
// order before the drag
console.log('Before complete', items);
// Finish the reorder and position the item in the DOM based on
// where the gesture ended. Update the items variable to the
// new order of items
setItems(event.detail.complete(items));
// After complete is called the items will be in the new order
console.log('After complete', items);
}
return (
<IonList>
{/* The reorder gesture is disabled by default, enable it to drag and drop items */}
<IonReorderGroup disabled={false} onIonItemReorder={handleReorder}>
{items.map((item) => (
<IonItem key={item}>
<IonLabel>Item {item}</IonLabel>
<IonReorder slot="end"></IonReorder>
</IonItem>
))}
</IonReorderGroup>
</IonList>
);
}
export default Example;
In my app, I want to let users rearrange items in a certain order, and I want to save the state to my server.
I’m using react-hook-form and I can do that pretty easily.
But, how do I set the initial state of IonReorderGroup? For example, say the user previously updated the state of items to [5,4,3,2,1]; how do I get IonReorderGroup to show the items in that order when the component is loaded?
The problem is that you can’t just change the line const [items, setItems] = useState[5,4,3,2,1] like you would normally set state in React. It seems to be that you need to do something like a one-time useEffect() on component load and then manually trigger handleReorder(), but I’m having trouble getting that to work.
2 posts - 1 participant
Hi,
I used a capacitor plugin to place my app content under the safe area on ios devices. I used this plugin
and I managed to place my app content under the safe area by using a css class:
.safe-area {
padding-top: var(--safe-area-inset-top) !important;
}
But i cannot click on the three buttons on the left of my app bar even if they are under the safe area. I can click on the icon right under the profile icon. I also tested on testflight and Its also not clickable on my phone. I tried applying z-index to my app bar but no matter what it was not clickable. I also tried using marginin instead of padding but it did not fix anything.
I also tried to use env() in my css class but the app bar is placed far below the dynamic island:
.safe-area {
padding-top: env(safe-area-inset-top) !important;
}
This works but i would like the app bar to be right below the dynamic island. Is the content that appears in yellow on the pictures in this link clickable ?
1 post - 1 participant
I installed ionic 7.2.0 and when I run the ionic capacitor sync command I get the following error Error: This command is not available when running the Angular CLI outside a workspace.
[ERROR] An error occurred while running subprocess ng. I previously had ionic 5.4.16 and it worked, what could be happening?
1 post - 1 participant
Hi, is there some way how can I style ONLY time button inside ion-datetime-button ?
this is my css which work for both date and time button
ion-datetime-button::part(native) {
background: transparent;
padding-inline-start: 0;
}
what is not working is this
ion-datetime-button::part(native) {
background: transparent;
padding-inline-start: 0;
#time-button {
background: red;
}
}
1 post - 1 participant
Our error monitoring is sometimes reporting that a page using options api has this scope null in ionViewDidEnter and ionViewDidLeave? It doesn’t happen much, but once in a while. Why would that be?
2 posts - 2 participants
1 post - 1 participant
I am attempting to re-make an updated version of my PWA app with modern versions of Angular, Ionic, and Firebase. I am failing to get a PWA at actually gets recognized as a PWA so it can be installed, with custom desktop icons, etc.
The page https://ionicframework.com/docs/angular/pwa on how to do this seems out of date, but I did the best I could with it, and things seem to still not work – in the end my firebase hosted Ionic app is just not recognized as a PWA, and Chrome does not offer to install it as such.
I’ve recreated the issue using the most minimal setup I could. The github repo is here.
In the repo, my README.md documents the steps I took.
Ionic Info:
ionic info
[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'
Require stack:
- /Users/vtn2/.nvm/versions/node/v20.9.0/lib/node_modules/@ionic/cli/lib/project/index.js
- /Users/vtn2/.nvm/versions/node/v20.9.0/lib/node_modules/@ionic/cli/lib/index.js
- /Users/vtn2/.nvm/versions/node/v20.9.0/lib/node_modules/@ionic/cli/index.js
- /Users/vtn2/.nvm/versions/node/v20.9.0/lib/node_modules/@ionic/cli/bin/ionic
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package.json'
Require stack:
- /Users/vtn2/.nvm/versions/node/v20.9.0/lib/node_modules/@ionic/cli/lib/project/index.js
- /Users/vtn2/.nvm/versions/node/v20.9.0/lib/node_modules/@ionic/cli/lib/index.js
- /Users/vtn2/.nvm/versions/node/v20.9.0/lib/node_modules/@ionic/cli/index.js
- /Users/vtn2/.nvm/versions/node/v20.9.0/lib/node_modules/@ionic/cli/bin/ionic
Ionic:
Ionic CLI : 7.2.0 (/Users/vtn2/.nvm/versions/node/v20.9.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.4.3
@angular-devkit/build-angular : 19.1.5
@angular-devkit/schematics : 19.1.5
@angular/cli : 19.1.5
@ionic/angular-toolkit : 12.1.1
Capacitor:
Capacitor CLI : 7.0.1
@capacitor/android : not installed
@capacitor/core : 7.0.1
@capacitor/ios : not installed
Utility:
cordova-res : not installed globally
native-run : 2.0.1
System:
NodeJS : v20.9.0 (/Users/vtn2/.nvm/versions/node/v20.9.0/bin/node)
npm : 10.1.0
OS : macOS Unknown
If anyone has recently created a PWA with custom icons, I’d appreciate any insight you can give me.
1 post - 1 participant
I am building Ionic 7.2.0/Angular/ngModule apps. Recently I found that once I use command line “Ionic g page page_name”, it always fails the compiling with the generated page with the following error message:
“error NG6008: Component PageName is standalone, and cannot be declared in an NgModule. Did you mean to import it instead?”
This issue was not there when I create new pages a few month earlier. I further investigated and found that I can add “standalone: false,” to @Component part in the page_name.page.ts file to fix the issue. However, it is very inconvenient to add such a statement for each new page I create. Is it possible to fix “Ionic generate” to avoid the error generated by default? Thanks!
1 post - 1 participant
I’m using Ionic Vue on Cordova, and Android is allowing to change vue routes via swipe and I don’t want that. I added the following configurations, but they don’t help:
const app = createApp(App)
.use(IonicVue, {
// We don't want to allow swiping on Android to change route.
// TODO: This is not working on Android, either forward or backward.
swipeBackEnabled: false
})
document.addEventListener('deviceready', () => {
// disable back button on android
// https://cordova.apache.org/docs/en/latest/cordova/events/events.html#backbutton
document.addEventListener(
'backbutton',
e => {
e.preventDefault()
return false
},
false)
}, false)
}
I also added the following to the MainActivity.java, but that also has no effect:
@Override
public void onStart() {
super.onStart();
OnBackPressedCallback callback = new OnBackPressedCallback(true) {
@Override
public void handleOnBackPressed() {
}
};
getOnBackPressedDispatcher().addCallback(this, callback);
WebView webView = (WebView) appView.getEngine().getView();
webView.setOverScrollMode(WebView.OVER_SCROLL_NEVER);
}
1 post - 1 participant