We are using ionic 5 Capacitor. We are using on super-tabs pages changes the page is not reloading also when we go to other page and come back to the tab page the tab page is not reloading please help if any one have solution on this.
↧
Capacitor tab page is not reloading on tab change and if come back on that page
↧
Ionic-image-loader alternative to preload images
Any good alternatives to this? I am using Capacitor.
ionic-image-loader - npm has not been updated in a couple of years and while I can build it with 7.0.0-beta-2. It has this error when serving or running on device.
Uncaught TypeError: Cannot read property 'id' of undefined
at registerNgModuleType (/vendor-es2015.js:81976)
at /vendor-es2015.js:81987
at Array.forEach (<anonymous>)
at registerNgModuleType (/vendor-es2015.js:81987)
at new NgModuleFactory$1 (/vendor-es2015.js:82084)
at compileNgModuleFactory__POST_R3__ (/vendor-es2015.js:85628)
at PlatformRef.bootstrapModule (/vendor-es2015.js:85866)
at Module../src/main.ts (/main-es2015.js:3464)
at __webpack_require__ (/runtime-es2015.js:85)
at Object.0 (/main-es2015.js:3477)
↧
↧
How to change build version of app release?
Hello!
Please suggest how to change build number of application for release update on appstore/play market.
Basically on cordova i was changing only config.xml
but in capactior i dont know how
Thank you for answers!
↧
Is it possible to integrate Capacitor into an existing iOS/Android App?
I think what you’re describing is what the Ionic team has called “embedded Capacitor” in the past. This was originally on the roadmap for Capacitor 3, but has been postponed. See e.g. Embedded Capacitor · Issue #3182 · ionic-team/capacitor · GitHub, and also this community effort: GitHub - fkirc/embedded-capacitor: Embedding of https://capacitorjs.com/ into existing native apps
Ionic will probably soon offer an Enterprise solution for this under the name “Ionic Portals”, see Portals: a Supercharged Web View - Ionic - The Cross-Platform App Development Leader.
↧
Build apps targeting Windows, Mac, and Linux
You can use electron with Ionic for windows build. There are only a few steps then you can able to build windows applications using electron.
Please see this tutorial for more information: How to Generate Windows build For Ionic - Capacitor Applications using electron | Develop Mobile Applications
↧
↧
I can't get IonIcon to work
Hi,
Please import icon from ionicons/icons as shown below
import { alarmOutline } from ‘ionicons/icons’;
use it in your code as follows
↧
Npm run build does not make web assets directory ./www
Hi,
Not sure if this works or not but give it a try.
→ Take a backup of your code first.
→ Go to capacitor.config.ts
change webDir : 'www’
→ Run the command: Ionic build
↧
Angular ngFor not iterating through array on Android
Hello all,
First post, and pretty new user of ionic. So far I love it! My web app is working just dandy, but I’m running into an issue with android (haven’t gotten to iOS yet). I scoured the internet from corner to corner and couldn’t figure it out.
Here’s the rundown:
Retrieving an array of objects from my data api. The logs show everything to be returning as it should. I begin to have issues when trying to use an ngFor on either an ion-col (this is what I’m using for web) and even an ion-list. Basically android debugging is saying Error trying to diff, and that my array isn’t iterable. Here’s some code to see what’s going on.
page.ts file:
selection: Array<SelectionModel>=[];
getSelection() {
if (this.platform.is('ios') || this.platform.is('android') || this.platform.is('mobile')) {
this.httpMobile.get('https://www.asdf.com/' + this.config.endpoints.getSelection, {}, {})
.then(data => {
this.selection = data.data;
console.log('selection: ' + this.selection);
console.log(data.status);
console.log(data.data); // data received by server
console.log(data.headers);
})
.catch(error => {
console.log(error.status);
console.log(error.error); // error message as string
console.log(error.headers);
});
} else {
this.selectionService.getSelections('web').subscribe(
x => {
this.selection = x;
},
error => {
console.log(error);
},
() => {
// this.loadingScreen = false;
}
);
}
html file:
<div *ngIf="ios || android">
<ion-list *ngFor="let item of selection; index as i">
test
{{item.name}}
</ion-list>
data returned from api:
[
{
"name": "Grey Goose",
"description": "This is a description but short.",
"size": "750ml",
"price": 29.99,
"content": 40,
"brand": "Grey Goose",
"country": "France",
"state": null,
"region": null,
"inStock": true,
"imageURL": "assets/spirits/vodka/greygoose.png",
"typeId": 2,
"categoryId": 1,
"id": 1,
"created": "2021-08-10T02:29:20.59",
"lastModified": "0001-01-01T00:00:00"
},
{
"name": "Absolut",
"description": "This is a description but long. This is a description but long. This is a description but long.",
"size": "750ml",
"price": 19.99,
"content": 40,
"brand": "Absolut Vodka",
"country": "Unites States",
"state": "California",
"region": null,
"inStock": true,
"imageURL": "assets/spirits/vodka/absolut.png",
"typeId": 2,
"categoryId": 1,
"id": 2,
"created": "2021-08-10T02:29:20.593",
"lastModified": "0001-01-01T00:00:00"
}
]
error in android studio:
Msg: ERROR Error: Error trying to diff '[{"name":"Grey Goose", ..<refer above for actual data>... }] Only arrays and iterables are allowed
My understanding is that the array returned is iterable. Am I just missing something here? Any help is appreciated!
↧
Translate Module missing into external component
Hi everyone. I have a strange issue with translate module. I try to describe the scenario:
- Main page
- ClubSettingsMenuComponent (it is a Popover Menu)
Main Page has a button that open popover Menu (Component Page).
ionic info
Ionic:
Ionic CLI : 6.13.1 (C:\Users\luca\AppData\Roaming\npm\node_modules\@ionic\cli)
Ionic Framework : @ionic/angular 5.6.8
@angular-devkit/build-angular : 12.0.3
@angular-devkit/schematics : 12.0.3
@angular/cli : 12.0.3
@ionic/angular-toolkit : 4.0.0
Cordova:
Cordova CLI : 10.0.0
Cordova Platforms : 6.0.0, browser
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 5 other plugins)
Utility:
cordova-res : not installed
native-run : not installed
System:
NodeJS : v14.16.1 (C:\Program Files\nodejs\node.exe)
npm : 6.14.12
OS : Windows 10
In Main Page
import { ClubSettingsMenuComponent } from 'src/components/club-settings-menu/club-settings-menu.component';
async openSettingsMenu(ev: any) {
const popover = await this.popoverController.create({
component: ClubSettingsMenuComponent,
cssClass: 'my-custom-class',
event: ev,
translucent: true
});
await popover.present();
const { role } = await popover.onDidDismiss();
console.log('onDidDismiss resolved with role', role);
}
In ClubSettingsMenuComponentModule
@NgModule({
imports: [
CommonModule,
IonicModule,
TranslateModule.forChild()
],
declarations: [ClubSettingsMenuComponent],
exports: [ClubSettingsMenuComponent]
})
export class ClubSettingsMenuComponentModule {}
In html page
<ion-list>
<ion-item (click)="goToSearchUsers()">
<ion-icon name="custom-add-users" slot="start"></ion-icon>
<ion-label>{{ "searchUsersAction" | translate }}</ion-label>
</ion-item>
</ion-list>
When I open page, in console:
core.js:6456 ERROR Error: Uncaught (in promise): Error: NG0302: The pipe 'translate' could not be found!. Find more at https://angular.io/errors/NG0302
Error: NG0302: The pipe 'translate' could not be found!. Find more at https://angular.io/errors/NG0302
Can you help me to understand the issue please?
Thanks in advance
Luca
↧
↧
Google Analytics startTrackerWithId not working
- make sure the Google Service SDK install
- specify GMS_VERSION on install cordova-plugin-google-analytic, like ‘ionic cordova plugin add cordova-plugin-google-analytics --variable GMS_VERSION=17.0.1’
If you capture logging from logcat (android) you may find some (classNotFoundException) google class is missing Exception before plugin callback
Hope this help
↧
Ion-input weird behavior and focus delay on iOS only
Hello everyone!
It’s my first time here, I hope each and every one of you is healthy and doing well.
I recently started learning Ionic and while working on my first project, I noticed that problem happening
So basically, I’m creating a login form, I have two ion-inputs, a check box and a submit button, everything works perfectly fine on desktop and android version, but when I change the device to an iOS device in the dev tools, the app acts weirdly when entering the inputs
If you look closely at this GIF, you’ll notice that sometimes when I click in the ion-input field (The cursor turns yellow on my click just so you know when did I click), it delays the focus for like a second or the focus goes to the password field and comes back weirdly
Once again, this only happens on iOS, I did also try on a real iPhone, same behavior, but everything is perfectly fine on desktop and android version.
Best regards
↧
How to change build version of app release?
You change it in the native project, in the App’s module build.gradle file.
versionName field is for the visible name of the version (it’s a string)
versionCode is the number you should always increment when uploading to the play store to determine that is newer than the previous one (it’s an integer)
↧
Npm run build does not make web assets directory ./www
Ionic now supports multiple frameworks and every framework uses a different folder. www is used for angular, is your app an angular app?
↧
↧
[SOLVED] How to change build version of app release?
Thank you
Also i found this package for convinient set version
↧
How to render facebook,twitter URL in ionic 5 app
@Tommertom Thank you for providing this link.
Do you know how can we get embed URL of Instagram and Youtube like this?
↧
How to render facebook,twitter URL in ionic 5 app
Hi
Google is your best friend
Type embed youtube and then you will have an answer
Tom
↧
Would Capacitor work with just vanilla Javascript, HTML and CSS?
Greetings! First of all, I want to express my apologies if this question has been answered already, whether in this forum, somewhere else or in the documentation. I’m trying my best to understand what I’m looking at and working with.
I am working on a web application that doesn’t use any additional JavaScript frameworks, besides jQuery for a few lines of code. It’s mostly vanilla. The remaining part of it is HTML and CSS, which I assume can be used without any problems…
Must have an
index.htmlfile with a<head>tag in the root of the web assets directory.
I am a bit confused with all these frameworks listed. Am I required to use one of them? I’ve tried to look for an answer but I just couldn’t find it. All I want to do is make it available as a native application for mobile devices as well.
Best wishes!
↧
↧
Would Capacitor work with just vanilla Javascript, HTML and CSS?
Hi
that should work as long as npx cap copy command can take the web assets from the right place
Then you are good to go.
Capacitorjs is the only framework to look at.
Vanilla project aren’t that common, but should be a big deal. I believe in these kind of projects the build and dev directory are basically the same as you don’t use a bundler. Other projects use bundlers to take source code to bundle into a browser friendly build
Tom
↧
Would Capacitor work with just vanilla Javascript, HTML and CSS?
Thank you for your quick and simple answer!
↧
Updating the state of the Home page component from an IonModal
You are doing too much in the modal, move the business logic out of the modal, and update the state in the parent component that calls the modal
↧