Quantcast
Channel: Ionic Framework - Ionic Forum

Font in third party library canvas is smaller in iOS 18.5

$
0
0

Hi ionic Team and Community,

We are experiencing a issue after our customer upgraded to iOS 18.5.

Problem Description:

  • Our app has a third party library, implementing complex chart in canvas.
  • Previously, the font looks normal, the third party library has some API to config these font.
  • After the iOS 18.5 upgrade, only the font in the canvas is smaller than before, all the other font looks as before
  • not an issue on earlier or later iOS versions (including 18.4.x and below, 18.6 and later).

Technical Context:

  • Framework: Ionic 6 / Angular 16
  • Affected Device(s): iPhones running iOS 18.5
  • Unchanged Code: No code changes have been made recently; this issue surfaced immediately after the iOS upgrade.

Request:

  • Has anyone else in the community faced similar issues on iOS 18.5?
  • Are there known compatibility issues or updates required for hybrid apps with the iOS 18.5 release?

Any help or insight would be greatly appreciated.

Thanks in advance!
Yiming

1 post - 1 participant

Read full topic


Ion-range and IOS 18.6

$
0
0

Hi All

My App, has multiple ion-range bars, but for some reason, this can not be moved on the most recent version of 18.6. Can anyone advise why this could be happening?

1 post - 1 participant

Read full topic

Do deep links violate "Switching between tabs" rules?

$
0
0

The Docs for React navigation say:

“Since each tab is its own navigation stack, it is important to note that these navigation stacks should never interact. This means that there should never be a button in Tab 1 that routes a user to Tab 2. In other words, tabs should only be changed by the user tapping a tab button in the tab bar.” React Navigation: Router Link Redirect to Navigate to Another Page

But my app has a FAB that has shortcuts to various parts of the app (usually with query param state pre-filled). (pressing the FAB opens various smaller icon buttons that when pressed route the user to a specific page with state provided in query params). I also have notifications that provide a deep link to a specific page (with query param state). My questions are:

  1. Does this violate the rule stated above? If a user is on tab-A and they click on the FAB shortcut to go to tab-B?param1=123&param2=abc, does that count as changing tabs without tapping on a tab button in the tab bar?

  2. If so, what is the worst that could happen? Will something actually break or is it just a matter of not meeting the expectations of how navigation works on mobile?

  3. Does this mean deep linking is never allowed since it might route the user to a different tab than they are on when they use the deep link?

1 post - 1 participant

Read full topic

Can I use Angular Universal prerender with ionic framework?

$
0
0

Hi everyone,

I’m trying to use angular universal prerendering with an Ionic Angular app.

To test I created a simple app with Tabs template.
When I run “ng run app:prerender” the cli correctly generate all files in dist/app/browser but when i run a simple http server and open the browser I get the following error:

ERROR TypeError: Cannot read properties of undefined (reading ‘nextSibling’)

I haven’t added any custom code, it’s just the tabs template.

Is it possible to use Angular prerender with Ionic framework?
Thanks in advance!

1 post - 1 participant

Read full topic

IonReorderGroup.completeReorder standalone gives error 'Cannot read properties of undefined (reading 'length')'

$
0
0

Hi, I have started converting my Ionic Angular project from Modules to standalone. I have the latest Ionic and Angular, and everything is working fine, including the IonReorderGroup.

I ran the Angular script to convert to standalone, and am working my way through components, importing from @ionic/angular/standalone

Most seems to be working so far (I have not finished yet), but I have just got up to a component that uses `IonReorderGroup`.

All Ionic imports are from @ionic/angular/standalone.

I have removed all my custom contents, and now just have a basic IonReorderGroup template like

 <ion-list>
      <ion-reorder-group [disabled]="false" (ionReorderEnd)="handleReorder($any($event))">

        <ion-item>
          <ion-label> Item 1 </ion-label>
          <ion-reorder slot="end"></ion-reorder>
        </ion-item>

        <ion-item>
          <ion-label> Item 2 </ion-label>
          <ion-reorder slot="end"></ion-reorder>
        </ion-item>

        <ion-item>
          <ion-label> Item 3</ion-label>
          <ion-reorder slot="end"></ion-reorder>
        </ion-item>

      </ion-reorder-group>
    </ion-list>

However, I now get the following error on the completeReorder handler….

this.el is the following…

and the member __children is undefined, hence the exception when trying to access .length

I saved my progress and went back to before I started the standalone, and put a break point in the same place. In this case, this.el looks a bit different, and .children is not undefined…

Does anyone have any ideas what could be causing this?

My project conversion is not finished yet, I don’t know if this could have anything to do with it, (it is a large project), but other parts are all working.

Thanks in advance for any help in diagnosing this.

1 post - 1 participant

Read full topic

Using and configuring IonicStoreage for Standalone (2025)

$
0
0

Hi, I am in the process of updating my Ionic / Angular application to standalone.

I have Angular v20.1.4, Ionic v8.7.1

I see some older post on setting up Ionic storage, and also at GitHub - ionic-team/ionic-storage: Ionic Storage module for Ionic apps I don’t see any mention of how to import for standalone.

Do I assume we still import the module, as following (e.g. in app.config.ts) but inside of importProvidersFrom..

providers: [
  importProvidersFrom(      
      IonicStorageModule.forRoot()
    ),
]

Thanks in advance

1 post - 1 participant

Read full topic

How to provide Ionic services such as Toast, AlertController etc into my own Standalone services

$
0
0

Hi, I have been converting my (quite large) Module bases Ionic/Angular application to standalone. I now have all modules gone, and I import Ionic components into each of my components.

For example

import {
  PopoverController,
  IonButton,
  IonBackButton,
  IonCol,
  IonContent,  
  IonGrid,
  IonHeader,
  IonIcon,  
  IonButtons,
  IonRow,
  IonSelect,
  IonSelectOption,
  IonSpinner,
  IonTitle,
  IonToolbar,
  IonSearchbar,
} from '@ionic/angular/standalone';

and then add these to the component's import array (it was a lot of work to do for each component). Anyway, have done all this.

So I see a lot talking about importing into components, but not so much services. I’ve just edited this post, as it seems to be the PLUGINS, not the services such as AlertController that are the problem.

For example the toast plugin..

import { Toast } from '@awesome-cordova-plugins/toast/ngx';

For example, I have a service, that wraps, toasts, alerts etc into the service, so I can just inject this root service into components (or other services) and use all these common “services”.

e.g. I have

@Injectable({
  providedIn: 'root',
})
export class UserMessageService {
constructor(
    private toastCtrl: ToastController,
    private nativeToast: Toast,
    private alertCtrl: AlertController,
    private modalCtrl: ModalController,
    private translate: TranslateService,
    private logger: Logger,
    private loadingCtrl: LoadingController,
    private platform: PlatformService
}

My application now builds and runs, however I get errors such as

I assume I will also get the for the other Ionic component I inject (Toast etc)

I use the provideIonicAngular as documented now…

export const appConfig: ApplicationConfig = {
  providers: [
    provideIonicAngular({ innerHTMLTemplatesEnabled: true }),
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    provideRouter(routes, withPreloading(NoPreloading)),

    // NgRx store
    provideStore(), 

and no longer import IonicModule anywhere (they are all gone)

My question is now do I “provide” these “plugins” in my service?

The @Injectable has no providers array…

My own services should be OK, as I have them provided in root, but how can I now “import” these various Ionic “services” into my own service, so I can inject this service anywhere I want throughout the application?

Thanks in advance for any information

2 posts - 1 participant

Read full topic

App working with Live Reload but not working with Android Studio or xcode

$
0
0

I have an Ionic/Angular app in standalone mode that works perfectly while I test it in live-reload mode with ionic cap run android -l --external. However, when I run it directly from Android Studio or Xcode, or compile it for upload to the marketplaces, everything stops working. Ionic components like buttons only display text, no onclick events work, and stylesheets seem to have no effect. Previous versions of the app that were not in standalone mode worked without any issues. Does anyone have any clue?

With live reload

directly from Android Studio or Xcode

Ionic:

   Ionic CLI                     : 7.2.0 (/Users/apps/.nvm/versions/node/v20.11.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 8.4.0
   @angular-devkit/build-angular : 18.2.11
   @angular-devkit/schematics    : 18.2.11
   @angular/cli                  : 18.2.11
   @ionic/angular-toolkit        : 12.1.1

Capacitor:

   Capacitor CLI      : 6.1.2
   @capacitor/android : 6.1.2
   @capacitor/core    : 6.1.2
   @capacitor/ios     : 6.1.2

angular.json
"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "www",
      "index": "src/index.html",
      "main": "src/main.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "tsconfig.app.json",
      "inlineStyleLanguage": "scss",
      ........

6 posts - 2 participants

Read full topic


How to provide DI services in a Angular stand alone component that is created via a lazy loaded component that uses ModelController.create

$
0
0

Hi I am converting my modules bases Ionic/Angular application to standalone. I have a number of lazy loaded

components (previously modules), that have services “private” to that component, that is they are provided ion the lazy loaded components route rather than in root.

So I have code such as this in the lazy component..

const modal = await this.modalController.create({
        component: EditComponent,           
        backdropDismiss: false,
        componentProps: {
          data
          fullScreen,
        }        
      });

And my “EditCompoent” has quite a few constructor injections…

constructor(
    private store: Store.
    private modalController: ModalController,
    private translate: TranslateService,
    private logger: Logger,
    private userMessageService: UserMessageService,
    ...

However now, when I go to open this, I get an error

ngrx/store: The feature name "myFeatureState" does not exist in the state, therefore createFeatureSelector cannot access it

I am sure if it I didn’t’ get the error regarding the ngrx store, I would get the same for all other services that I provide in the component that is running the above modal.

I did try creati8ng a constant in the features routes file, e,g.

I did try creati8ng a constant in the features routes file, eg

export const featureProviders: Array<Provider | EnvironmentProviders> = [
}

This still works in the routes file

export const routes: Routes = [
{
path: '',
component: FeaturePage,
canDeactivate: [CanDeactivateGuard],    
providers: featureProviders,
},

But if I import and use this constant in the component used in the popup like…

@Component({
  selector: 'app--edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.scss'],
  providers: featureProviders as Provider[],

I get the error

root_effect_scheduler.mjs:3583 ERROR ReferenceError: Cannot access 'featureProviders' before initialization
        at Module.featureProviders (escape-key-handler.ts:45:3)
        at 72538 (edit.component.ts:157:14)
        at __webpack_require__ (bootstrap:19:1)
        at 35959 (feature.reducer.ts:2004:2)
        at __webpack_require__ (bootstrap:19:1)
        at 4298 (edit.component.scss:114:1)
        at __webpack_require__ (bootstrap:19:1)
        at 18532 (helper.service.ts:260:2)
        at __webpack_require__ (bootstrap:19:1)
        at 58229 (escape-key-handler.ts:45:3)

So my question is how do I now pass/provide to this component used in the popup, hopefully without having to manually write each out in the providers array?

1 post - 1 participant

Read full topic

HELP: Android Keyboard Issue resizing and overlaying other contents

$
0
0

Hey everyone,

I’ve run into a stubborn keyboard issue on Android that I can’t seem to solve, and I’m hoping someone here has encountered this before.

**The Goal:**

When an input at the bottom of the page is focused, the keyboard should open, the webview should resize, and the content should scroll so the input is visible above the keyboard.

**The Problem:**

The keyboard opens and overlays the footer or input. The webview is not resizing properly, so my footer and any inputs at the bottom get half covered.

**My Environment Details:**

Ionic:

Ionic CLI : 7.2.1

u/angular-devkit/build-angular : 19.2.15

u/angular-devkit/schematics : 19.2.15

u/angular/cli : 19.2.15

u/ionic/angular-toolkit : 12.2.0

Capacitor:

Capacitor CLI : 7.2.0

u/capacitor/android : 7.2.0

u/capacitor/core : 7.2.0

u/capacitor/ios : not installed

Utility:

cordova-res : not installed globally

native-run : 2.0.1

System:

NodeJS : v22.15.0 (C:\\Program Files\\nodejs\\node.exe)

npm : 8.5.1

OS : Windows 10

**What I’ve Tried:**

This seems to be a classic `adjustResize` problem, and I’ve tried all the standard solutions I could find online:

`1. AndroidManifest.xml`**:** My main activity is explicitly set to `android:windowSoftInputMode=“adjustResize”`.

<activity

android:windowSoftInputMode=“adjustResize”>

import { KeyboardResize } from ‘@capacitor/keyboard’;

  1. capcitor.config.ts`

`Keyboard: {`

`resize: KeyboardResize.Native`

`resizeOnFullScreen: true`

`}`

**The Question:**

Given that all the standard configurations seem to be correct, what else could be overriding or interfering with the native `adjustResize` behavior on Android?

Has anyone run into a situation where a different Capacitor plugin, a specific device setting, or maybe a subtle CSS issue caused this? I’ve spent days on this and am completely stuck. Any ideas would be hugely appreciated!

1 post - 1 participant

Read full topic

IonToggle and IonRadioGroup are now giving RuntimeError: NG01203: No value accessor for form control name: for reactive forms

$
0
0

I have quite a large form, which includes the above elements. No, after going to standalone, those controls only give me the No value accessor error.

All other controls work fine, including IonTextArea, and these use to work. The control is there, and has the correct value (true)

It has the correct name, but valueAccessor is null

I created a new Ionic app with a form and the above elements worked fine.

My question is how can I possibly diagnose why I have this problem in my application. I can see the control should have this (source below), so I am stumped as to why it is null for me, and how can I find out why. I can’t provide a simple example, as it works in a new simple example, but not in my project I have been converting to standalone.

And why just these to control, and not all the others?

Anyone have any suggestions on how to diagnose?

Thanks in advance

1 post - 1 participant

Read full topic

Change new font size on a popover select box

$
0
0

trying to amend the font-size on a ion-select popup - can’t seem to get down to the level at which the text is displayed.

2 posts - 2 participants

Read full topic

AdMob test banner not showing on Xiaomi device

$
0
0

Hello,
I’m integrating AdMob in my app and I’m testing with the official test banner IDs provided by Google.
The issue is that the banner does not appear at all inside the app.

I checked the logs and I can see some SSL errors like:

Failed to validate the certificate chain, error: java.security.cert.CertPathValidatorException: Trust anchor for certification path not found
[ERROR:net/socket/ssl_client_socket_impl.cc:914] handshake failed; returned -1, SSL error code 1, net_error -202

I’m not sure if these errors are related, but I suspect that it could be a problem specific to my device.
Currently I can only test on a Xiaomi 2312DRA50G (Android 15), and I don’t have other devices available to confirm if this happens elsewhere.

Could this be related to Xiaomi/MIUI certificate validation issues, or is there something I might be missing in the integration?

Thanks in advance for your help!

1 post - 1 participant

Read full topic

Library for easier IonIcon usage in Angular

$
0
0

I’d like to introduce my library that makes the IonIcon usage in standalone build really easy. It frees you from cumbersome addIcons business while keeping the same template.

Please give it a try. Any comments and suggestions are welcome!

1 post - 1 participant

Read full topic

How Do You Handle Push Notifications & Analytics in Ionic Apps?

$
0
0

I’ve been working on an Ionic project where the client wants push notifications and in-app analytics as part of their marketing setup. Since apps are becoming a big part of digital marketing services, I’m looking for the best approach.

Some businesses, especially those targeting regional audiences (like campaigns for ), want location-based notifications and real-time engagement tracking.

What do you recommend for this? Should I go with Firebase for notifications + analytics, or rely on Capacitor plugins for better control?

2 posts - 2 participants

Read full topic


React+Capacitor w/ ionic UI

$
0
0

Hello! I have a problem here.. the header is not respecting my safe area view..

as you can see in the image below it is hitting my status bar.. how to prevent it?

I tried to ask for help with chat gpt a solution work but the height of header in my real device is too high.

1 post - 1 participant

Read full topic

Css classes become undefined in capacitor after upgrading to angular 19 on ionic 7, capacitor 8

$
0
0

Hi community,
I’m upgrading my project from Angular 18 to 19 and noticed that some Ionic styles stopped working on iOS and Android builds, while the web version still looks correct. I inspected the app on a native Android device using Chrome DevTools and compared it to the web styling; I found that several CSS class names are now undefined.

Has anyone seen this before? What could cause class names to disappear after an Angular upgrade, and how would you debug or proceed with this issue? Any tips are appreciated. Thanks — have a great day/night!
Best,

1 post - 1 participant

Read full topic

Developing Ionic Apps for Companies Offering Digital Marketing Services

$
0
0

Hi everyone,

I’m working on an Ionic app designed to help companies streamline their digital marketing services. I’m particularly focused on features like campaign management, analytics dashboards, and customer engagement tools.

Curious to know from the community:

  1. How do you structure data and components for real-time marketing analytics?
  2. Best plugins or strategies to integrate notifications and updates for clients?
  3. Tips for optimizing app performance while handling large datasets related to campaigns?

Would love to hear your experiences and recommendations for building Ionic apps tailored to digital marketing.

1 post - 1 participant

Read full topic

Angular.js build options optimization=true disappears ion-menu

$
0
0

I have a relatively large ionic/angular app

as of the latest update of ionic, i have a problem that my production app, which is compiled using optimization=true is not finding the menu, so the menu button is gone.

in the test build, where optimization=false, it works fine. I have now turned optimization off for production, but this results in much larger bundle sizes so it is not optimal.

anyone seeing similar issues with the lates ionic/angular 8.7.3?

1 post - 1 participant

Read full topic

How to handle Ionic layout issues when keyboard opens on devices with Display Zoom or Large Text enabled?

$
0
0

We’re facing a layout issue in our Ionic (Angular + Cordova) app.
The problem mainly happens on iOS devices where Display Zoom or Large Text (Accessibility settings) are enabled.

When the native keyboard opens, parts of the layout shift or overlap incorrectly. This doesn’t happen with default settings, only when system scaling is applied.

What we tried

  • Adjusting <meta viewport> tags (initial-scale, user-scalable, maximum-scale).

  • Tweaks in config.xml and platform-specific preferences.

  • JS-based detection (checking window.innerWidth vs screen.width, devicePixelRatio).

Despite these attempts, we found that system-level scaling (Display Zoom, Large Text) isn’t something we can control.

Is there any recommended approach or workaround in Ionic/Angular to:

  1. Prevent or reduce layout breaks when keyboard opens under these accessibility settings?

  2. Programmatically detect Display Zoom / Large Text?

  3. Apply CSS strategies (e.g., forcing minimum font-size on inputs, safe-area insets, flexible containers) to keep layout stable?

  • Ionic Framework v5

  • Angular 11

  • Target platforms: iOS & Android

1 post - 1 participant

Read full topic

Ion-datetime calendar-body doesn't show after update to Cap7

$
0
0

Hello. My ion-datetime calendar doesn’t render properly. The whole body has opacity: 0

I updated to Capacitor 7. I use ion-datime in an ion-modal where I have :keep-contents-mounted="true" that one works just fine..then I have one that gets triggered with a button, also no problem, and then I have one in a regular ion-modal with breakpoints and other components, see code below, and that one that doesn’t show calendar body. I checked the css and .calendar-body shadow dom class stays on opacity: 0 … why? If I add :keep-contents-mounted="true" it does render but then it messes edge to edge for the modal, and it renders below system buttons. Am I doing something wrong? It did work on Cap6.

Thank you

 <template>
    <ion-modal
        :is-open="openModal"
        :initial-breakpoint="types[calendarType].breakpoints[1]"
        :breakpoints="types[calendarType].breakpoints"
        :show-backdrop="openModal"
        @did-present="initializeCalendar"
        @did-dismiss="onDismiss"
        @ion-breakpoint-did-change="handleBreakpointChange"
    >
        <ion-header>
            <ion-toolbar>
                <ion-title class="text-secondary">{{ types[calendarType].title }}</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <ion-datetime
                id="datetime"
                ref="dateTimePickerRef"
                v-model="displayDate"
                locale="cs-CZ"
                presentation="date"
                color="secondary"
                :highlighted-dates="highlightedDates"
                :first-day-of-week="1"
                @ion-change="changeDate"
            >
            </ion-datetime>

            <meal-type-picker
                v-if="!isDayDuplicate && !isPremiumMealPlanApply"
                ref="mealTypePickerRef"
                :other-day-meals="chosenDayMeals"
            />
        </ion-content>
        <button-footer :with-debounce="true" @go-back="openModal = false" @confirmed="checkDuplicates" />
    </ion-modal>
</template>

I have this class for it

 ion-datetime {
    margin: auto;
    border-radius: 20px;
}

Removing the class doesn’t change anything.

Thank you

2 posts - 1 participant

Read full topic

Implemented Share capacitor plugin in ionic angular v7 app

$
0
0

Implemented share capacitor plugin in ionic angular app for sharing vimeo videos but while sharing in whatsapp gmail and sms it shares url but when i share on slack, facebook, instagram it erased the url. we are also sharing the thumbnail storing it in directory cache it works everywhere but the url is not being shared.
I will appreciate if you guys support or pay attention to this issue!
thankyou

1 post - 1 participant

Read full topic


Date-time selected date custom backgroundImage

$
0
0

In date-time component we need a custom style setting for selected date background image:

In the highlighted dates module, the my json is:

    this.highlightedDates = \[

      {

        date: '2025-09-04',

        textColor: '#800080',

        backgroundColor: "var(--ion-color-tertiary)",

        cssClass: 'fire-day',

      },

    \];

CSS:
.fire-day{

background-image: url(“/streak/fire.svg”);

background-size: contain;

background-repeat: no-repeat;

background-position: center;

border: 1px solid #e91e63;

color: #800080; /* keeps the date text */

}

How to set the custom CSS class if i need to set a background image for the selected date?

1 post - 1 participant

Read full topic

Mukesh Karkey : How can I customize the look and feel of Ionic components, like buttons or cards?

$
0
0

Hello Friends,

Mukesh Karkey here ,I’m looking to customize the look and feel of my Ionic components, like buttons and cards, and I’m curious to hear about the different approaches you all use. What’s your preferred method for styling components—do you rely more on CSS variables, create custom CSS classes, or use a preprocessor like Sass?

Regards,

Mukesh karkey

1 post - 1 participant

Read full topic

Toggle Wrapper

$
0
0

Hi guys, I wanna create a registration form and I wanna use the toggle to ask for permission to subscribe to a newsletter. Weirdly enough, the label is always very far away from the checkbox. I checked it and there seems to be an element called label.toggle-wrapper, that is way too big. But I can’t find a way to reduce to width.

Do you guys have any idea? Or is this maybe inheritted from other elements or classes? I couldn’t find any dependent classes

2 posts - 2 participants

Read full topic



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>