Ionic 7 to Ionic 8 (Angular) Migration Guide

    Apr 25, 202411 min read3329 viewsUpdated:Nov 27, 2024
    Ionic 7 to Ionic 8 (Angular) Migration Guide

    Recently Ionic 7 upgrade was announced and the Ionic 8 release came into the picture. Naturally, you are curious about many aspects of this version including migration. As you would know Ionic said it wouldn't be Ionic if the migration process is complicated. Keeping in mind the challenges of breaking changes, in this version, they have kept it to a minimum.

    Without wasting any time, let's get extensive details on how to migrate your Ionic 7 application to Ionic 8. With the detailed steps and being mindful of potential issues, you can successfully migrate your Ionic 7 project to benefit from the latest improvements and features offered by Ionic 8.

    Migration Preparation

    To prepare for the migration, you will need to follow the below steps.

    Backup

    Make sure you make a backup of your complete Ionic 7 project prior to initiating the migration. This will safeguard you in case you need to revert.

    Update Ionic CLI

    You will need to ensure that you have the newest Ionic CLI version to take maximum benefit from the latest migration tools. Use the below command:

    Bash
    npm install -g @ionic/cli@latest

    Upgrade to the Latest Ionic 7

    It is suggested that you should have the most recent stable version of Ionic 7 before shifting to 8. Run the command:

    Bash
    ionic update

    Browser and Platform Support

    Also, note the versions supported by Ionic 8. Following are the browser versions supported by Ionic 8.

    Minimum Browser Versions

    minimum browser versions

    Minimum JavaScript Framework Versions

    minimum javascript framework versions

    Minimum Mobile Platform Versions

    minimum mobile platform

    The latest Ionic Framework has removed the backward support for CSS animations. This is to benefit the Web Animations API. All the above-mentioned browser versions support the Web Animations API.

    Now let us start the migration of dark mode, global styles, haptics, and components.

    Dark Mode

    In the previously used version, the dark palette was defined in the following example:

    @media (prefers-color-scheme: dark) {
      body {
        /* global app variables */
      }
    
      .ios body {
        /* global ios app variables */
      }
    
      .md body {
        /* global md app variables */
      }
    }

    However, in Ionic Framework 8, the distribution of dark palettes is through CSS files and they can be imported. With the following example, developers can import dark palette files in Angular:

    /* @import '@ionic/angular/css/palettes/dark.always.css'; */
    /* @import "@ionic/angular/css/palettes/dark.class.css"; */
    @import "@ionic/angular/css/palettes/dark.system.css";

    By importing the dark.system.css file, the dark palette variables will be interpreted like below:

    @media (prefers-color-scheme: dark) {
      :root {
        /* global app variables */
      }
    
      :root.ios {
        /* global ios app variables */
      }
    
      :root.md {
        /* global md app variables */
      }
    }

    Now the dark palette is applied :root selector instead of the body selector. The :root selector showcases the <html> element and is similar to the selector html, the only difference is that its specificity is higher.

    Global Styles

    This migration will also give access to the text color and the dynamic font from Ionic 7 applications to Ionic 8.

    Text Color

    The core.css file has been altered to change the text color on the body element:

    body {
    
    +  color: var(--ion-text-color);
    
    }

    This will permit components to take the color properly when utilized outside of the Ionic Framework. It is also used when required for custom themes to work adequately. But, it may have some unintentional downsides or drawbacks in the applications if the component or color is not expected to be inherited.

    Dynamic Font

    They have updated the core.css file to incorporate dynamic font scaling by default. The --ion-default-dynamic-font variable has been deleted and replaced with --ion-dynamic-font.

    In the past, if developers have picked dynamic font scaling by activating it in their global stylesheets can return to the default setting by removing their custom CSS. The application will still continue to use dynamic font scaling as it did earlier. Developers should also understand that changing the font size of the HTML element will hinder the proper functionality of dynamic scaling.

    Experience Cross-Platform Support with Ionic Development. Hire Angular Minds for your Ionic Application Development and enjoy native-like performance at an affordable price.

    Haptics

    In the latest version, support for the Cordova Haptics plugin has been retracted. Components that integrate with haptics, such as ion-picker and ion-toggle, will continue to operate but will no longer perform haptics in Cordova environments. Developers should migrate to Capacitor to continue to have haptics in these components.

    Components

    This migration guides different components too. This includes checkbox, content, datetime, Nav, modal, picker, and many more. Let's see how:

    Button

    Button text now wraps by default and if you don't need this behavior, you can just include the ion-text-nowrap class from the CSS Utilities.

    Checkbox

    The legacy property and support for the legacy syntax, that included placing an ion checkbox inside of an ion-item with an ion label, have been eliminated.

    Content

    Content doesn't set the --background custom property when the .outer-content class is set on the host.

    DateTime

    The month-year-button part of the CSS shadow has now been modified to target a button element instead of ion-item. Developers will need to confirm with their UI renders as they require for the month/year toggle button inside of ion-datetime.

    Developers that employ CSS variables available on ion-item will need to migrate their CSS to use CSS properties.

    Input

    Developers now need to use CSS to clarify the visible width of the input. Size and accept has been removed from the ion-input component.

    This was earlier used in conjunction with the type="file". But, the file value for type is not a valid value in the Ionic Framework.

    The legacy property and support for the legacy syntax, which involved placing an ion-input inside of an ion-item with an ion-label, is also removed.

    Item

    The helper slot is removed. Developers will need to use the helperText property on ion-input and ion-textarea.

    The error slot is also removed. Developers should use the errorText property on ion-input and ion-textarea instead.

    Counter functionality has been removed. This also includes the counter and counterFormatter properties. Developers should use the properties of the same name on ion-input and ion-textarea.

    The fill property has been removed. Developers should use the property of the same name on ion-input, ion-select, and ion-textarea.

    The shape property has been removed. Developers should use the property of the same name on ion-input, ion-select, and ion-textarea.

    Item now doesn't automatically incline focus to the first focusable element. The usability of ion-item with interactive elements such as form control should be analyzed to check that interaction works as per the expectations.

    CSS Variable

    The deprecated CSS variables have been removed. These include: --highlight-height, --highlight-color-focused, --highlight-color-valid, and --highlight-color-invalid. These variables were initially used on the bottom border highlight of an item when the form control inside of that item was focused. The form control syntax was made simple in Ionic 7 so that inputs, selects, and textareas would not be required to be used inside an item.

    Modal

    It is now crucial to verify if the developers are using Capacitor 3 or the latest version when using the card modal presentation. This is because Detection for Capacitor <= 2 with applying status bar styles has been removed

    Nav

    getLength returns Promise<number> instead of <number>. This method was not available before in Nav's TypeScript interface, but developers could still approach it by casting Nav as any.

    Picker

    ion-picker and ion-picker-column have been given new names to ion-picker-legacy and ion-picker-legacy-column, respectively. This change was made to correspond with the new inline picker component while allowing developers to continue to use the legacy picker during this migration period. Rest everything is same.

    Progress Bar

    Now you should Use --background instead as the --buffer-background CSS variable has been removed.

    Toast

    cssClass from the ToastButton interface that was earlier used to employ a custom class to the toast buttons is removed. You can use the "button" shadow part to style the buttons instead.

    Radio

    The legacy property and support for the legacy syntax, which included placing an ion-radio inside of an ion-item with an ion-label, have been removed.

    Range

    The legacy property and support for the legacy syntax, that involved placing an ion-range inside of an ion-item with an ion-label, have been discarded. Developers should provide a label (either visible text or aria-label) directly to the form control.

    Searchbar

    The autocapitalize property now defaults to 'off'.

    Textarea

    The legacy property and support for the legacy syntax, which involved placing an ion-textarea inside of an ion-item with an ion-label, have been withdrawn.

    Toggle

    The legacy property and support for the legacy syntax, which included placing an ion-toggle inside of an ion-item with an ion-label, is removed.

    Framework Specifics

    For Angular, The IonBackButtonDelegate class has been removed as it favor the IonBackButton.

    - import { IonBackButtonDelegate } from '@ionic/angular';
    
    + import { IonBackButton } from '@ionic/angular';

    Concluding Thoughts

    Migration from Ionic 7 to Ionic 8 may look like a challenge but the performance improvements in the latest version makes it worth the effort. Ionic 8 is all set to make robust and performant hybrid apps with its primary focus on performance, web components, and tighter Angular integration. This migration guides a smooth migration process and we hope you get the insights you need to migrate your project from Ionic 7 to Ionic 8.

    24
    Share
    Hire Dedicated Ionic Developers
    Hire Dedicated Ionic Developers
    With Angular Minds, get 2-week free trial, flexible hiring models, an NDA-protected contract, IP-Rights protection, timezone compatibility, and easy onboarding.
    Hire Now

    Related articles

    This website uses cookies to analyze website traffic and optimize your website experience. By continuing, you agree to our use of cookies as described in our Privacy Policy.