Ionic framework is an open-source framework that is available under the MIT License for the development of hybrid mobile and desktop applications. It uses web technologies like HTML, CSS, Javascript along with javascript frameworks that are Angular, React, and Vue. It is a single codebase running on all mobile and web platforms.

Ionic 4 was released in January 2019. Ionic 4 had a considerable change in the Syntax of the Ionic Angular codebase along with it also added official support for React, Vue, and web components.

Note: There is not much difference between Ionic 4 and Ionic 5 syntax. I will be referring to Ionic 4 in this article, but you can use the same article to move to Ionic 5.

To get started with Ionic 4 you can either install or update the Ionic CLI and then you can start the application.

Host web app

Migrating from Ionic 3.0 to 4.0

The new Ionic change has significant advantages over Ionic 3. The ionic framework has entirely revamped from scratch using standard web API’s and each component is packaged as a web component.
It is always a good approach to make the migration process from scratch by creating a new project for your application, rather than trying to enhance the existing application.

Mobile Development
  1. Firstly before migrating to any framework, we need to familiarize ourselves with the changes that happened so that will be aware before itself of what changes has to be done in our application. You can always refer Ionic framework’s official page.
    Now let’s get started with the migration. Make sure your Ionic CLI is updated. Let’s create a new Ionic4 application which is a blank starter and then copy all your code in the relevant folder one by one. Make sure you upgrade your angular version too so that we get to experience new features of Angular and Ionic 4.

  2. This approach is suitable when there is a notable change in the structure of the project, Ionic 4’s project structure is fully altered. Now your whole code will reside within the app folder of your project unlike Ionic 3 where all the code was in the src folder and not in the app folder.

    Ionic 3 project folder structure:

    Host web app

    Ionic 4 project folder structure:

    Host web app

    You may get many syntactical errors once you copy all your code and run the project this is because Ionic 4 uses an upgraded version of Angular wherein there are many changes. But will see further how to solve one by one.
    You need to copy files in their particular folder. This will help in categorizing the files and keeping the structure intact. For instance, service files should be saved under the service folder same as pipe files should be saved under the pipes folder, page files should be saved under the pages folder, components should be saved under components, and so on. You might also need to rename the files since the naming practice has changed in Ionic 4.

    Naming practice in Ionic 3:

    Host web app

    Naming practice in Ionic 4:

    Host web app

  3. The 3rd step will be the important one and i.e. installing Dependencies. You need to install all the dependencies which you have added to your Ionic 3 application. After you copy the files from the Ionic 3 project to Ionic 4 and you run the project by doing Ionic serve you’ll get a bunch of errors in which a few of the errors will be related to the missing packages from your Ionic 4 project. You have to install all the missing dependencies by doing the following - Either add the package in your package.json and run the below command

    Host web app
    or you can run the below command

    Host web app
    Make sure you add the relevant packages since a few of the packages names might have changed.

  4. Next is to add your Angular routes because in Ionic 3 the routes were fully different. Here you will have to add all your routes in the app-routing.module.ts file in order to travel from one page to another. Your route navigation code in Ionic 4 will also be different from Ionic 3’s Push and Pop. This file will be imported into the app.module.ts file.

    Your app-routing.module.ts file will look like this:
    Host web app
  5. At this point when you run your code, you might get many syntactical errors. So what you have to do is read the errors carefully and go to each page, each service, each component and change the code/syntax accordingly and bring the application up and running. You even have to change your ionic tags in an HTML file.

    Here are few changes:
    1. In service file the injectable decorator has been changed from @Injectable() to @Injectable({provideIn:’root'})
    2. < button ion-button>Click Me < /button> Ionic 3 syntax < ion-button>Click Me< /ion-button> Ionic 4 syntax
    3. ion-navbar is changed to ion-toolbar
    4. ion-option is changed to ion-select-option
    5. Now all the inline styles need to be wrapped inside class attribute e.g. < ion-button class=”ion-padding”>Click Me< /ion-button
    6. @IonicPage decorator has been removed in Ionic 4
    7. The col size is now written like size=”1” and if you want to add a position to any element add it like position=”floating”.
    8. Angular lifecycle hooks like ngOnInit, ngOnDestroy has replaced Ionic lifecycles.
    9. In Ionic 4, the package name is @ionic/angular. While migrating an app, update the imports from ionic-angular to @ionic/angular.

  6. Now will see changes related to CSS. In ionic 4 the main css file is changed from the app.scss to global.scss. Copy all the CSS from app.scss to global.scss. The custom CSS/theming works slightly differently in Ionic 4. Ionic 4 uses CSS4 variable instead of SASS variables. You need to change your variable.scss file to change the variable declaration to CSS4 variables.
    Host web app


If you follow the above steps then your fresh Ionic 4 application should be up and running. Few of them require many other changes/fewer changes according to their application. You might also need to update your Cordova plugins which you have used in your application. You can always refer to the Ionic 4 Official Page for syntax changes/plugin changes.

Contact us to find out how to implement Ionic 4 and 5 for your applications.