Have you managed it?
↧
IONIC 4 - Show Route page from a modal
↧
App blank when testing on android device
Would be nice to display a message to the user if the webview was too old too, what version is supported?
↧
↧
ERROR in tsconfig.json with fresh project
↧
App not loading in iOS
I’m not 100% sure how to test as a PWA, I’m new to Ionic. I am able to locally pull it up in Simulator after running ionic serve
I am able to get a freshly created Capacitor app running via npx cap run ios on a Simulator
↧
App not loading in iOS
Hi
from the code I can see you have a service worker setup, so that seems something all good.
And as you are using firebase, it can almost be as simple as deploying to firebase hosting.
This test helps you figuring out potential incompatibility of your web code with iOS in Safari browser.
Tom
↧
↧
Optional chaining and Nullish coalescing don't work with Typescript
Hello 
I am facing errors when i try to use ? or ?? operators with Ionic Vue (Typescript)
Examples:
user?.name
const value = test ?? ‘Default’
If i try it without lang=“ts” on script it works
Also those features works fine on Vue 3 project generated with vue cli.
Errors:
Module parse failed: Unexpected token
…
You may need an additional loader to handle the result of these loaders.
Best regards
↧
App blank when testing on android device
For the upcoming Ionic Framework v6 release we will be supporting Chrome/Chromium 60+ (See: Browser Support | Ionic Documentation)
Ionic Framework v4 and v5 more or less support the same versions, but the docs up until now have not been very clear on this. It’s a bit tricky since the webview updates independently of the Android version, and some device manufacturers lock the webview version.
Webviews older than Chromium 60 can work with Ionic Framework, but you likely need to modify your browserslist file so that the correct polyfills are bundled (GitHub - browserslist/browserslist: 🦔 Share target browsers between different front-end tools, like Aut)
↧
Optional chaining and Nullish coalescing don't work with Typescript
What version of TypeScript are you using?
↧
App not loading in iOS
I also verified that the app can run on Android, so it seems my issue may be iOS specific
↧
↧
IONIC 4 - Show Route page from a modal
How would this make any sense?
A modal interrupts the ordinary flow of user action, because it demands immediate attention before anything else can happen. To me, that implies that it must be on the “top” of the logical “stack” of windows. If anything is obscuring any of it, the metaphor crumbles and the modal can’t do its job properly.
↧
App not loading in iOS
wow, not sure why or how. but i threw my hands up, deleted the android and ios folders, re-ran ionic capacitor add {platform}, and now it’s working when I use ionic capacitor run ios -l --external
it still doesn’t work if I use npx cap run ios, but at least I’m getting somewhere
↧
Make ionic cards side by side the same height
There are other contents in the page where a height: 100%; will block
↧
iOS Build size increasing drastically after adding this plugin to Ionic-5 project
I am adding “cordova-plugin-aes256-encryption” plugin to my Angular/Ionic-5 project which increasing iOS build size from 24.5MB to 99.7MB.
If anyone facing the similar issue?
Version Details:
“@ionic-native/aes-256”: “^5.35.0”,
“cordova-plugin-aes256-encryption”: “^2.0.1”,
↧
↧
iOS Build size increasing drastically after adding this plugin to Ionic-5 project
No idea, but why are you doing this in the first place? The browser you’re running in already has a faster AES implementation built into it.
↧
Make ionic cards side by side the same height
Percentage values for height are relative to the containing block element, so as long as you have a structure like the following:
<foo>
<bar>a</bar>
<bar>b</bar>
</foo>
…I don’t see how giving a height: 100% on each bar would have any effect on anything outside the <foo> that encloses them.
↧
App not loading in iOS
Now ionic capacitor run ios -l --external is not working
I remembered that I needed to add in GoogleService-Info.plist to work with firebase.
I’ve basically followed this tutorial except I haven’t added the @capacitor/push-notifications package since I am not using push notifications.
↧
Make ionic cards side by side the same height
Thank you! I tried doing this:
<ion-content id="main">
<ion-grid>
<ion-row>
<ion-col size-xs="12" size-md="6">
<ion-card style="height: 100%;">
...
</ion-card>
</ion-col>
<ion-col size-xs="12" size-md="6">
<ion-card style="height: 100%;">
...
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
but now the cards seem a bit too long:
Also is there a way for there to be card footers, like those in bootstrap where we can place an element at the very bottom of the card? I tried using ion-footer both inside and out of ion-card-content to no avail!
↧
↧
Ionic 5 ion-split-pane when selecting a side panel link the view renders the component and after that all the links do not work
Here is the problem on my app in detail. When I click the “Procedure” link
The procedure component loads the view
If I try to go back to another the create component by clicking the “Create” link in the side panel it no longer works.
I must refresh the browser for the “Create” link to work.
Here are my files:
I have a component called side-menu.
side-menu.component.html
<ion-split-pane contentId="menu-content">
<ion-menu id="side-menu" contentId="menu-content" menuId="side-menu-create" type="overlay">
<ion-toolbar id="menu-header">
<ion-img [src]="'/assets/images/augmentorLogo.svg'"></ion-img>
</ion-toolbar>
<ion-content>
<ion-list lines="none">
<ion-menu-toggle autoHide="false" menu="side-menu-create" *ngFor="let menuItem of menuItems">
<ion-item [routerLink]=menuItem.url routerDirection="root" routerLinkActive="active-link">
<ion-icon class="ion-padding-end" color="primary" [name]="menuItem.icon"></ion-icon>
<ion-label color="primary">{{ menuItem.title }}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
<ion-footer class="ion-no-border ion-padding-bottom">
<ion-item href="/" routerDirection="root" routerLinkActive="active-link">
<ion-icon class="ion-padding-end" color="primary" name="log-out-outline"></ion-icon>
<ion-label color="primary"> Sign Out</ion-label>
</ion-item>
</ion-footer>
</ion-menu>
<ion-router-outlet id="menu-content"></ion-router-outlet>
</ion-split-pane>
side-menu.component.ts
import { Component, OnInit } from '@angular/core';
import { MenuController } from '@ionic/angular';
@Component({
selector: 'app-side-menu',
templateUrl: './side-menu.component.html',
styleUrls: ['./side-menu.component.scss'],
})
export class SideMenuComponent implements OnInit {
menuItems = [
{ title: 'Create', url: 'create-page', icon: 'add' },
{ title: 'Procedure', url: 'procedures', icon: 'create-outline' },
{ title: 'ClassroomAR', url: 'classroomAR', icon: 'school-outline' },
{ title: 'Contacts', url: 'contacts', icon: 'person-add-outline' }
];
constructor() {
}
ngOnInit() { }
}
I have a side-menu page that loads the side-menu.component
<app-side-menu></app-side-menu>
Side-menu-page.module.ts import this side-menu.component using ComponentsModule
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { SideMenuPagePageRoutingModule } from './side-menu-page-routing.module';
import { SideMenuPagePage } from './side-menu-page.page';
import { ComponentsModule } from 'src/app/components/components.module';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
SideMenuPagePageRoutingModule,
ComponentsModule
],
declarations: [SideMenuPagePage]
})
export class SideMenuPagePageModule {}
side-menu-page-routing.module has the following routes to load each component selected in the side menu
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SideMenuPagePage } from './side-menu-page.page';
const routes: Routes = [
{
path: '',
component: SideMenuPagePage,
children: [
{
path: 'create-page',
loadChildren: () => import('../create-page/create-page.module').then(m => m.CreatePagePageModule),
},
{
path: 'procedures',
loadChildren: () => import('../../procedure-list/procedure-list.module').then(m => m.ProcedureListPageModule)
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class SideMenuPagePageRoutingModule { }
↧
Make ionic cards side by side the same height
That doesn’t adhere to the structure I described, so percentage heights are not going to be operating off the same baseline. In order for percentage heights to work as equalizers, all of the <ion-card> elements have to be siblings. The ones in this post are cousins, because you have to go up two levels in the DOM (to the <ion-row>) to get to a common container.
So I don’t see how one would do this using <ion-grid> unless you want to set heights for the cards explicitly (as @mikrochipkid is suggesting).
Personally, what I would do is to ditch Ionic’s grid entirely, and just use CSS Grid. I would think align-self: stretch (which is the default) would do exactly what you are wanting in the first place.
I don’t know, but I do know that:
No on this. <ion-footer> must be a root child of a page, and doesn’t have any connection to cards.
↧
How can I use Infinite Scroll with Typescript?
I’ve been banging my head against a wall all day trying to get a simple Infinite Scroll example to work and all I can figure is that Typescript is preventing it from happening.
I’m following this doc, Infinite Scroller | ion-infinite-scroll Action Component … I’ve even completely replaced my code with the code in this doc, however it will not run because it crashes for the lines in loadData() saying that EventTarget does not have the properties “disabled” or “complete()”
If I take out those lines, everything runs fine but it will only send one request via the InfiniteScroll trigger. I’m assuming I need to typecast it to the correct type of event? But I cannot for the life of me find any documentation or github issue that explains how to work around this.
Any help would be greatly appreciated.
↧