Difference between Ionic 4 and Ionic 3

In this section, we are going to explain the main differences between Ionic 4 and ionic 3. After the release of the Ionic 3, Ionic framework team has released the Ionic 4 version. The new version of Ionic offers significant changes in the project structure, performance, compatibility with multiple frameworks (Such as Angular, React.js, and Vue.js), new documentation, and many other improvements. Now, let us see the comparisons one by one.

Changes in Package Name

In Ionic 4, the package name starts with @ symbol like @ionic/angular. Whereas, the Ionic 3 package name does not use the @ symbol. We can understand the syntax comparison of Ionic 3 and ionic 4 from the below syntax.

If you are going to migrating an app from Ionic 3 to Ionic 4, you need to update the imports from ionic-angular to @ionic/angular.

Project Structure

The major changes between Ionic 4 and Ionic 3 app are the overall project layout and structure. In Ionic 3, it had a custom convention for how an app should be set up and how the folder structure should look like. Whereas, in Ionic 4, app structure follow the recommended setup of each supported framework.

For example, if we built the app with Angular, the project structure will be exactly Angular CLI app structure. We can see the comparison of the project structure in the below image.

Ionic 4 vs Ionic 3

RxJS Changes

The Ionic 4 uses the latest version 6 of RxJS. It changes many of the import paths of operators and core RxJS functions.

Web Components

Ionic 4 was completely rebuilt to use the Web APIs, and each component is packaged as a Web Components. Web components are set of Web platform APIs which allows the Ionic framework to create custom, reusable, encapsulated HTML tags to use in web pages and web apps.

Since each component of Ionic 4 is a web component, they created and open-sourced a tool called Stencil. The stencil is a web component compiler used for building fast, reusable UI components and Progressive Web Apps.

Lifecycle Events

The lifecycle events that we had used in Ionic 3 such as ionViewDidLoad, ionViewCanLeave, and ionViewCanEnter have been removed, and their proper alternative is used in the Ionic 4. With Ionic 4, we are able to utilize the typical events provided by Angular.

For more information, click on the router-outlet docs.

Overlay Components

In Ionic 3, the overlay components such as loading, toast, and alert were created synchronously. But, in Ionic 4, they are created asynchronously. Now, the API became promise-based. For example,

In Ionic 3, we created the alert message as like below.

  showAlert() {    const alert = this.alertCtrl.create({      message: “Hello”,      subHeader: “I’m an alert message”    });      alert.present();  }  

In Ionic 4, promises are used. We can create the alert message as like below.

  showAlert() {    this.alertCtrl.create({      message: “Hello”,      subHeader: “I’m an alert message”    }).then(alert => alert.present());  }    // Or using async/await    async showAlert() {    const alert = await this.alertCtrl.create({      message: “Hello”,      subHeader: “I’m an alert message.”    });      await alert.present();  }  

Navigation

In Ionic 4, the navigation has received many changes. For example, instead of using the Ionic’s own navController, the v4 is able to integrate with the official Angular Router. It provides more consistent routing experience into the whole app. The Angular Router is the most important libraries in the Angular application. If it is not available, the app cannot maintain its navigation state on browser reloads. Thus, with the Ionic framework and Angular Router, you can create rich applications which are linkable and have rich animation.

Ionic version 3 navigation is based on the simple stack where the new pages pushed on top of the stack. And, when we want to navigate backward, simply pop the last page.

Traditional websites use linear history, where the user navigates to a required page and can press the Back button to navigate back. But, in Ionic Framework, applications can take this by allowing parallel navigation. It means that it has multiple navigation stacks and can exchange them at any time.

Lazy loading

As we have learned previously that the navigation has changed in Ionic 4, the mechanism for lazy loading has also changed. We can understand how lazy loading setup worked from the below code snippets.

In Ionic 3

  // home.page.ts  @IonicPage({    segment: ‘home’  })  @Component({ … })  export class HomePage {}    // home.module.ts  @NgModule({    declarations: [HomePage],    imports: [IonicPageModule.forChild(HomePage)]  })  export class HomePageModule {}  

In Ionic 4

  // home.module.ts  @NgModule({    imports: [      IonicModule,      RouterModule.forChild([{ path: ”, component: HomePage }])    ],    declarations: [HomePage]  })  export class HomePageModule {}    // app.module.ts  @NgModule({    declarations: [AppComponent],    imports: [      BrowserModule,      IonicModule.forRoot(),      RouterModule.forRoot([        { path: ‘home’, loadChildren: ‘./pages/home/home.module#HomePageModule’ },        { path: ”, redirectTo: ‘home’, pathMatch: ‘full’ }      ])    ],    bootstrap: [AppComponent]  })  export class AppModule {}  

Next TopicIonic Editors