My understanding is that the pattern of multiple pages in DOM, is expected, as the ionic will open a new page for every view. Its kept in the DOM for keeping history and faster navigation. However, but the display style should change - to ion-invisible or something like that. Maybe apply a custom class to it…not sure about that part.
↧
Overlapping with single ( + )
↧
Overlapping with single ( + )
Just looked in my app (Ionic 8 with Vue) and hidden pages get a ion-page-hidden class. Not having an IonPage wrapping everything in each view can cause navigation issues (you must have an IonPage for every view). I briefly checked your code and seems like you are using IonPage everywhere. Maybe double check?
↧
↧
Blank page after splash Ionic 7
here the link AvinSSSS/App-teste
i’m learning, thank you for your patience
↧
Blank page after splash Ionic 7
Ah, you are running Angular 19. Probably related to this - How to trace NullInjectorError which appears in Production environment only
A temporary fix is to set "optimization": false in angular.json.
↧
Where to import ionic components in standalone angular component
This was only added in Ionic 8. I bumped into this being unavailable before realising it was new in the 8 release - does your project use 8?
↧
↧
Blank page after splash Ionic 7
That was already set to false.
I tried setting it to true, but the problem remains.
I even tried downgrading Angular, but without success.
↧
Capacitor 7 raising minSdkVersion to Android 6?
Looking over the documentation for the upcoming Capacitor 7 release and I see that it apparently will no longer support Android 5.x. Looking at Updating from Capacitor 6 to Capacitor 7, I see this…
Which states that the minSdkVersion should be changed to 23 (Android 6). I see no other mention of this drop of support in the documentation. Ionic 7/8 still support Android 5.1+ (docs say… Ionic v8, Android 5.1+ with Chromium 89+)
Can anyone provide insight as to why this is? Why is this change necessary? Does this mean that an Ionic 8 + Capacitor 7 app will no longer support Android 5.1?
↧
Edge to edge Android
Hi, I’d like to add safe area padding for edge to edge android phones, right now it looks like this.
Please notice the white, barely visible status bar on top and gesture navigation crossing the main buttons. If I add in mainActivity.java the system padding by detecting the insets
public class MainActivity extends BridgeActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
// Enable Edge-to-Edge mode
WindowCompat.setDecorFitsSystemWindows(getWindow(), false);
EdgeToEdge.enable(this);
super.onCreate(savedInstanceState);
// Handle safe area insets dynamically
ViewCompat.setOnApplyWindowInsetsListener(
findViewById(android.R.id.content), // Root view of the activity
(v, windowInsets) -> {
// Get insets for gesture navigation and system bars
Insets gestureInsets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures());
Insets systemInsets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars());
// Apply padding dynamically (only TOP and BOTTOM)
v.setPadding(
0, // No left padding
systemInsets.top, // Top padding (status bar)
0, // No right padding
gestureInsets.bottom // Bottom padding (gesture navigation bar)
);
// Consume the insets so they aren't passed further
return WindowInsetsCompat.CONSUMED;
}
);
}
}
then I have issues with the overlay in general since capacitor uses webview, it adds correct padding but doesn’t respect the coloring nor dark mode/ light mode switch … I know about the safe area capacitor plugin but it adds such huge padding to both ios and android and to android phones that don’t even need it (that are not edge to edge). Maybe I configured it incorrectly, how do u guys handle edge to edge?
Thank you
↧
Blank page after splash Ionic 7
Try “optimization”:false under “production” Key in angular.json
↧
↧
Blank page after splash Ionic 7
That is exactly it. Thanks, Giammariomarini and Tom Westrick; both of you helped me a lot.
Have a great and blessed year!
↧
Edge to edge Android
I fixed it myself just for the edge to edge phones, if anyone is interested I can post the fix
↧
How to trace NullInjectorError which appears in Production environment only
So I was getting NullInjectorError’s repeatedly and came across this StackOverflow post
Deleting this file fixed the issue for me. I’m unsure why?
.browserslistrc
↧
Ion-datetime stuck on an infinite scoll
I am using the ion-datetime inside an ionic modal. I have a service named util which has a method that uses ModalController to create a modal for the datetime component which has the ion-datetime in it.
util.service.ts
constructor(
private mc: ModalController
) { }
async selectDate( title: string="Select Date" ){
let m = await this.mc.create({
component : DnDateSelectorComponent,
componentProps : {
title
},
cssClass : 'small-modal'
})
await m.present()
let {data} = await m.onDidDismiss()
return data;
}
dn-date-selector.component.html
<ion-datetime size="cover" presentation="date" [(ngModel)]="selectedDate">
<span slot="title">{{title}}</span>
</ion-datetime>
<ion-footer>
<ion-toolbar>
<ion-button color="secondary" slot="end" class="ion-margin-end" (click)="confirm()">
Done
</ion-button>
</ion-toolbar>
</ion-footer>
dn-date-selector.component.ts
constructor(
private mdc: ModalController
) { }
@Input() title: string = "Select Date"
@Input() selectedDate : string = ''
ngOnInit() {}
confirm(){
this.selectedDate = this.selectedDate.split('T')[0] || ""
this.mdc.dismiss(this.selectedDate, 'datetime-confirm');
}
This is what happens when utilService selectDate is called.
↧
↧
iOS : Capacitor 6 on iOS 16
A small update: I discovered that my project was missing a browserslist file, where the browsers the app shall support are defined. For Capacitor 6 I settled for these settings:
defaults and fully supports es6-module
not dead
iOS >= 15
Android >= 5.1
Maybe it helps someone.
↧
Ionic inAppBrowser end of life on July 1, 2024
I’m unable to use @awesome-cordova-plugins/in-app-browser
can you please suggest me a inappbrowser which is working for ionic 8
↧
Ionic inAppBrowser end of life on July 1, 2024
There are two 1st Party Capacitor plugins:
↧
Modern Angular App Routing - cant get it to work properly
I’m here today trying to figure out things related to this.
It doesn’t work for me when I remove routerlink from the angular package:
import { RouterLink } from '@angular/router';
↧
↧
Ionic IonRouterLink vs Angular RouterLink with standalone components
Trying to figure out what the situation is with IonRouterLink and RouterLink with standalone components.
I just did an upgrade progress and ran the schematics to update Angular, which added in the RouterLink imports.
Then I did the Ionic schematic (npx @ionic/angular-standalone-codemods) which ended up adding in the IonRouterLink throughout.
But then I removed RouterLink thinking it was a “mistake” of the Angular migration that wasn’t Ionic aware, and the routerlink attributed buttons stopped working.
So I looked on the docs, and saw that they say don’t use the IonRouterLink with Angular projects:
So I thought it must be an issue with the codemods schematic, but when I looked into that, it seems that it was explicitly added into the project with discussion:
It’s specifically for Angular projects, so they certainly seem to have intended to use IonRouterLink in Angular standalone projects.
My suspicion is that IonicModule maybe included IonRouterLink in the background with some nuance; it does seem to do something related to router links:
So is the conclusion that:
- You need to include the Angular and Ionic routerlinks for standalone components
- The documentation is out of date, and different guidance is needed for standalone components
If so then I can open a PR for the docs.
↧
Ionic IonRouterLink vs Angular RouterLink with standalone components
Actually, after writing all this out, I dug further in the docs and found that there is some clarification scattered around, eg in the Routing section of the Build Options:
I’ve submitted a pr to add a note to the ion-router-link documentation page to make this more discoverable.
↧
Ion-select modal interface customization
Hi, I am trying to use the modal interface of ion-select ion-select: Select One or Multiple Value Boxes or Placeholders.
I need to replace the CLOSE button provided with a different text and has to be translated with i18n.
Also, I wish to replace the Close button with an icon for the same modal but add aria-label for it. How do I achieve this.
I tried to use the Modal Interface Options to achieve this ion-modal: Ionic Mobile App Custom Modal API Component. But the component passed to it doesn’t help with the close button.
Can you please assist me with this?
↧
