Ionic 4 released January 2019, now we have Ionic 5

How do we go from 4 to 5 in less than 6 months? Going from 4.1.2 to 5.0.0.

Now what’s going to break? Going from 3 to 4 was painful.

Why are version numbers moving so fast? This npm is going to bug me forever now to update to 5.0

Update available 4.12.0 → 5.0.0 │
│ Run npm i -g ionic to update

1 Like

There are 2 spereate entities at work here

“5.0.0” is referring to an update to the CLI
Ionic CLI github

“v4” is the UI library based on web components (latest - 4.4.2)
Ionic framework github

3 Likes

Our company has a bunch of apps written with Ionic 3.
I’ve just explained my manager that we have to move to Ionic 4 with our new project. When I said ‘just’ I meant 15 min ago. He agreed, I typed ionic start and…

Update available 4.12.0 → 5.0.0 │
│ Run npm i -g ionic to update

:rofl::rofl::rofl:

10 Likes

Hey there, Ionic Framework has not released major version 5, you are seeing the Ionic CLI release.

Ionic CLI

The ionic package is the Ionic CLI :arrow_right: https://www.npmjs.com/package/ionic

The CLI is used to start & serve Ionic apps, but does not contain any changes to the framework. You can see more information on the CLI installation here: https://ionicframework.com/docs/installation/cli

Here is the changelog for version 5 of the CLI: https://github.com/ionic-team/ionic-cli/blob/develop/packages/ionic/CHANGELOG.md#500-2019-05-29

Ionic Framework

There are a few packages that make up the Ionic Framework which is used to get the components you see here: https://ionicframework.com/docs/components

@ionic/core: contains the core Ionic UI components that can be used in a vanilla JS application :arrow_right: https://www.npmjs.com/package/@ionic/core
@ionic/angular: contains the core components & bindings to work with Angular :arrow_right: https://www.npmjs.com/package/@ionic/angular

The following packages are in beta

@ionic/react: contains the core components & bindings to work with React :arrow_right: https://www.npmjs.com/package/@ionic/react
@ionic/vue: contains the core components & bindings to work with Vue :arrow_right: https://www.npmjs.com/package/@ionic/vue

You can see more information on using and updating these packages here: https://ionicframework.com/docs/installation/cdn

Release Schedule

We have some documentation on our versioning here: https://ionicframework.com/docs/intro/versioning

A major release will be published when there is a breaking change introduced in the API. Major releases will occur roughly every 6 months and may contain breaking changes. Several release candidates will be published prior to a major release in order to get feedback before the final release. An outline of what is changing and why will be included with the release candidates.

This means that we will not release a major version except for at a minimum of every 6 months. At the moment we do not have a major version planned in the near future, but there will be a full list of any breaking changes as we had with version 4.

We have been releasing every 2 weeks to quickly get bug fixes and features out.

Release Notes

We recently published a document that outlines the Ionic Framework release notes here: https://ionicframework.com/docs/release-notes

If you are looking to see what the latest framework version is, that page is updated with each release.

Documentation

I hope I cleared up some things, but if you have any ideas for how we can improve the documentation to make this better known, please file an issue on our documentation repository: https://github.com/ionic-team/ionic-docs/issues

Thanks! :slightly_smiling_face:

10 Likes

relax… ionic 4->5 will probably moving state with angular… not much breaking changes on my assumption

Just created account to like this comment. :smiley: :wink:

1 Like

I was with Angular 4 and Updated to Angular 8 and it was amazing. IONIC 3 was disgusting. That was slow in rendering to see the changes.So I Installed IONIC 5 - and I have to say is: IONIC 5 is brilliant. Speed and and very nice. I installed the Angular Material Library too to IONIC 5 and came to know that it was so easy to sustain and fast in Rendering. Love IONIC5 Whats more interesting is Bootstrap is out and CSS4 is in Action nice so that the templates are Unique of ones own creation. Cheers.

Ionic 4 is here! Ionic 5 is just changes i CLI does not in UI componets V5 is improvement of performance

After more than a year of work, the Ionic Framework team has released version 4.0.0. This new version offers significant changes in performance, compatibility with multiple frameworks (not only with Angular as previous versions), a new documentation and many other improvements that we will analyze in this article.

I guess you will have many doubts - and perhaps fear - about this new version. But the good news is that despite the great improvements offered by Ionic 4, migrating from Ionic 3 to Ionic 4 is super simple!

In this article I want to explain the main differences between Ionic 4 and Ionic 3 , as well as the new concepts of this brand new version. We will see practical examples of how to use the new Ionic CLI, and the new Router. Then at the end I will guide you on how to migrate your applications from Ionic 3 to Ionic 4.

Also, we created a To Do List App in Ionic 4 that you can download for free so you can see how to start using Ionic 4 to create a simple app with lists, forms and navigation.

At IonicThemes we are great believers of “learning by example” that’s why all of our Ionic tutorials include a free and complete ionic example app. We strive to create the best ionic tutorials so we go the extra mile and create a specific ionic application to show you how to use the concepts from the tutorial in a read mobile app.

Web Components

Ionic Framework 4 has been completely rebuilt from the ground up using standard Web APIs, and each component is packaged up as a Web Component.

This allows Ionic framework to be projected into the future by relying only on the APIs browsers support natively and also keeping the public API for each component stable.

Because each component of Ionic 4 will be a web component, they created and open sourced a tool called Stencil. Stencil is a web component compiler for building fast, reusable UI components and Progressive Web Apps.

What are Web Components?

Web components are a set of web platform APIs allowing you to create custom, reusable, encapsulated HTML tags to use in web pages and web apps. In other words, their functionality is encapsulated away from the rest of your code and you can utilize them in your web apps.

One way to explain the Web Components is to imagine them as reusable user interface widgets that are created using open web technologies. They are part of the browser, and therefore do not need external libraries or frameworks.

Using Web Components, you can create almost anything that can be done with HTML, CSS and JavaScript. In this way you can create a portable component that can be easily reused. One of the aims of the web components is to help developers re using code as much as possible.

Web Components are based on the following specifications:

  • Custom Elements: defines the bases and the fundamentals to design and use new types of DOM elements.
  • Shadow DOM: defines how to use encapsulated styles and markup within a web component.
  • HTML imports: defines how to include and reuse the HTML document in another HTML document.
  • HTML Template: defines how to declare code fragments that will not be used while the page is loading, but could be later instantiated at runtime.

Compatibility with other Frameworks

Since its beginnings Ionic Framework was built to work just with Angular. However, today with the popularity and support of web components this has changed.

One of the biggest changes of Ionic 4 is that it’s completely agnostic of the base framework (previously this place was occupied only by Angular).

Since the components of Ionic Framework, such as , are now encapsulated as Web Components, it is no longer necessary to bind to a base framework. Web components work with any framework, in fact if you prefer you can not use any Framework at all!

For those of us who have been using Ionic 3 with Angular, stay calm, as this will not mean major changes in our Ionic 4 applications with Angular.

What the Ionic team intends with this change is to show their original vision which was to build a UI Framework that could work with any technology a web developer chooses. This opens the door to future applications that can be created in Vue or in React using the Ionic web components.

On February 2019 the Ionic Framework team announced the release of Ionic React Beta! What does this means? Now, that Ionic’s core is able to adapt and expand to support many different frameworks, they are starting to work hard on getting their first betas to support other frameworks like React and Vue.

Also, React developers have always used React Native to make native apps for iOS and Android. Although React Native is a very good approach for native app development, Ionic believes in the web platform. React developers can find lots of advantages in creating hybrid mobile, desktop, and progressive web apps with Ionic and React. Learn how to start using Ionic and React.

ionic templates

Ionic CLI in Ionic 4

The CLI 4.0 has been heavily refactored to offer more features and to improve its speed and ease of use. The Ionic CLI aims to be your go-to tool for developing Ionic apps, offering powerful Cordova integration with livereload, custom schematics for generators. This new CLI has been designed to work next to the Angular CLI so you can get the best of both worlds.

In order to use it, we must have the latest version of the CLI in our development environment. We can install it by running the following command:

$ npm install -g ionic@latest

To use the latest version of the CLI we must have installed a version of node 8.9 or higher. Visit https://nodejs.org/ to find instructions on how to update Node.js.

Once the new CLI is installed, we can now create our first application with ionic 4. Running the following command, the CLI will create a new application with the basic structure of Ionic 4:

$ ionic start appName blank --type=angular

appName is the name of the project

blank is the template that we choose to create the skeleton of the application

type=angular is the type of project

Then, to test your application in the browser you can run the same command that we used before in Ionic 3.

$ ionic serve

This is the structure of our new Ionic 4 application generated with the CLI:

This new CLI allows us to use console commands to create new pages, components, directives and services. Let’s see some examples:

Create a new Page

$ ionic g page User

Ionic 4 new page

In the following screenshot you can see the files that are created when running the above command. By creating the page in this way the CLI also automatically adds it to our app-routing.module.ts

Ionic 4 create page

Create a new Service

$ ionic g service services/user

Ionic 4 new service

These are the files that are created when running the command to create a new service.

Ionic 4 create service

These are just some of the new functionalities that the new CLI has to offer. I invite you to explore the new documentation on the Ionic CLI for more details.

If you want to start creating your Ionic Framework app but don’t know how to start, I suggest your to try Ionic 4 Full Starter App. It’s an ionic 4 app that you can use to jump start your Ionic app development and save yourself hundreds of hours of design and development.

It includes more than 100 carefully designed views and components. It will help you grasping the new concepts of Ionic 4 development as well as the good practices. It has full support for PWA with Angular. Try it on your phone as a PWA to see the magic!

ionic 4 pwa

Navigation in Ionic 4

There are great changes in the navigation and in the Router, which in my opinion, are a big win. Let’s see why. Ionic 4 now uses the Angular Router.

The Angular Router is one of the most important libraries from an Angular application. Without it, apps would not be able to maintain their navigation state on browser reloads. With Angular Router and Ionic Framework, we can create rich applications that are linkable and have rich animations.

Ionic 3 used a navigation based on a simple stack where the new pages were pushed on top of the stack and when we wanted to navigate backwards we simply made a pop of the last page.

Traditional websites use a linear history, which means that the user navigates to a page and can press the Back button to navigate back. In Ionic Framework, applications can take this a step further by allowing parallel navigation. Which means that it is possible to have multiple navigation stacks and exchange them at any time. An example of this would be having a navigation with tabs on one page and another with a side menu.

If you want to discover all the possibilities the new Ionic Navigation brings and also learn some usability tricks we can add to our Ionic Framework apps to make them look even better you need to read Ionic Navigation & Routing: The Ultimate Guide.

Something important to mention is that NavController and ion-nav in Ionic 4 have become obsolete. You can still use them, but only if your application does not use Lazy Loading.

As we already said, when creating an angular type application, Ionic 4 uses the navigation of Angular 7. This is why when creating our ionic 4 angular application, the CLI automatically creates an app-routing.module.ts file located in src/app .

Let’s see what’s inside this file and what are the differences with the navigation in an Ionic 3 app.

In Ionic 4:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './pages/home/home.module#HomePageModule' },
];
@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

And now to navigate to the HomePage we have to do the following:

import { Router } from '@angular/router';
constructor(private router: Router) { }
navigateToHome(){
  this.router.navigate(['/home']);
}

In Ionic 3:

import { NavController } from 'ionic-angular';
import { HomePage } from './pages/home/home'
constructor(public navCtrl: NavController){}
navigateToHome(){
  this.navCtrl.push(HomePage);
}

It’s important to understand that navController is no longer used for the navigation in Ionic 4.

Navigation example in Ionic 4

Let’s take a step further and see how to pass information between two pages in Ionic 4.

//item is an object like:  { title: “Some title”, description: “Some description”  }


itemSelected(item) {
 this.router.navigate([“/home”, item]);
}

Then, to get the object “Item” in our HomePage, we use the ActivatedRoute.

import { ActivatedRoute } from '@angular/router';
export class HomePage implements OnInit {
 item: any;
 constructor(private route: ActivatedRoute) { }

 ngOnInit() {
   this.route.params.subscribe(data => {
     this.item = data;
  })
 }
}

Navigation LifeCycles

The life cycles that we used in Ionic 3 such as ionWillLoad will no longer be used in Ionic 4. Now we will use the Angular life cycles such as ngOnInit and ngAfterViewInit .

If you are familiar with Angular, this will sound natural to you. If you want to learn more about Angular, I suggest you read Angular Tutorial: Learn Angular from scratch step by step .

routerLink

In Ionic 3 the click event is used to navigate between pages from the markup. In Ionic 4 we will use the routerLink , as it is used in Angular applications.

Below is super simple example to navigate to https://yourwebsite.com/product/123 when clicking a button.

<ion-button [routerLink]="['/product/123']">Go to Product 123</ion-button>

Angular Modules

It is also important to mention that it is no longer necessary to import the pages and services in the app.module.ts file, which in my opinion makes the project much simpler and more organized.

If we use lazy loading, for each page there will be a module. Then, if we want to use Reactive Forms (for example) on a specific page, we only import ReactiveFormsModule on the page or pages that will use it.

The code below is from the src/app/pages/new-item/new-item.module.ts of our example application in Ionic 4 that you can download for free by clicking the GET THE CODE button from the beginning of this page.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { NewItemPage } from './new-item.page';
const routes: Routes = [
  {
    path: '',
    component: NewItemPage
  }
];
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [NewItemPage]
})
export class NewItemPageModule {}

How to migrate your application from Ionic 3 to Ionic 4?

You are probably wondering how to migrate an existing Ionic 3 application to Ionic 4. The Ionic Framework team has written a super detailed documentation with the migration steps.

This guide covers both how to migrate from Ionic 1.0 to Ionic 4.0 and how to migrate from Ionic 3.0 to 4.0 . Also there’s a specific page from the Ionic documentation where you can find more information about migrating to Ionic 4.

The truth is that the migration process is quite simple and personally has not generated any problems, so relax!

You can also use the migration linter which is a tool that automatically checks your code and tells you what changes you should make to migrate your ionic 3 app to ionic 4.

Final thoughts on Ionic 4

In this article we talked about the main differences between Ionic 4 and Ionic 3 as well as the new concepts proposed by Ionic Framework 4.0.

I hope it has helped you to understand more about the new version of Ionic Framework and above all to calm fears about migration. As mentioned above, migrating from Ionic 3 to Ionic 4 does not mean rewriting your application (as it did in the migration from Ionic 1 to Ionic 3).

If you want to learn more about IonicFramework, at IonicThemes we have lots of free ionic 4 tutorials with practical examples so you can learn how to create the best mobile apps using Ionic Framework

I cannot believe Angular is in version 8 now, ionic is in version 4? I bought an app ionic version 2 and in less than a year it has expired!

I am back to ionic today, after a year, having recommended ionic as the best, but only to find its a new beast of technology to contend with :rofl::rofl::rofl:

Anyhow I will learn ionic 4 on my toes ready to jump to version 5, people are already smelling it.

just logged in to like this reply :stuck_out_tongue: