Ionic 4 is now in Beta which brings breaking changes to your application - you can read about the benefits that Ionic 4 brings to the table here. This article will be a living document where I'll cover my experiences with Ionic 4, so please be prepared for new information to be added to this article and information to be removed (if it is not valid). .
Ionic 4 Documentation
Since Ionic 4 is in early beta there is very little documentation available and the official documentation is no where near as complete as what I was used to with Ionic 3. Since I mainly use Angular for my frontend development, the main change with the official documentation is the lack of angular-ish documentation. The main reason as I feel the reason behind this is because Ionic 4 is intended to be framework agnostic, allowing it to be used with a wide variety of frameworks.Ofcourse, this means it makes my life harder. At present the documentation for Ionic 4 is in beta, however, the documentation site is badly missing search features. Which makes migration for early adopters a nightmare of manually reading through documentation. If the ionic team are reading this, I would encourage you to apply search facilities for the Ionic 4 documentation to allow a smoother transition between Ionic 3 to 4.
Installation
To get started with Ionic 4 you simply have to get the CLI updated to v4.npm install -g ionic
Next, to use the new templates you need to use --type=angular at the end. I.e
ionic start myapp --type=angular
Migration from v3 to v4
If you are that way inclined, you start migrating your v3 project to v4. The way that I had migrated to v4 is manual migration, instead of using tools. This allowed me to understand the breaking changes and what was changing from v3 to v4. This is where the reliance of the community, stackoverflow, and the documentation came in handy.To do the mannual migration, you need to first copy your current project to a new directory. Next use the CLI to create a new project template :
ionic start <myapp> --type=angular
Once your template of your app has been created using Ionic 4, you can start by slowing migrating your project across. To do this I opened two copies of my IDE (in my case I use Visual Studio Code) and generate the pages/providers/services etc...
Please note... Ionic does provide a migration linter that can warn and sometimes fix the errors.
Breaking Changes
Where's the Providers
In Ionic 4 along with Angular 6, providers as knew them are now called services (as we knew them), so instead of doing :ionic g provider <providername>
use
ionic g service <servicename>
What happened to ionic-angular import ?
The import of NavController etc... from ionic-angular now needs to be imported from @ionic/angular. Therefore your import statement will be :import { NavController } from '@ionic/angular';
What happened to IonicPage ?
I used IonicPage to do lazy loading in Ionic v3, this is no longer required. See navigation below.Is NavParams still required ?
NavParams can still be imported from @ionic/angular however, I haven't found that I have needed to use it. Instead I had rolled my own singleton service pass data between components, services, and pages.What happened NavController ?
NavController is still what you use to move from one page to another, however, in Ionic v3 we used .push and pop() method (push to move forward, and pop to move back). This is theoretically still the same, however, the navController has changed to .goForward() and goBackward. The changes also means that the navigation is handled using angular routing.Check out src/app/app-routing.module.ts if you used the cli to generate the pages then a route will automatically generated within app-routing.module.ts. This will be an entire article by itself, however, for the time being to get yourself moving quicking in your migration check out what the cli and the template have generated for the routes and familiarise yourself with it.
The NavController.goForward method takes a string as a path which is the routing path.
So if you have route about in your routes, then you would use NavController.goForward as
navController.goForward('/about');
Where is the back button in the pages ?
In Ionic 3, the back button is automatically added to the pages. When you are manually migrating from v3 to v4 you may have noticed that the pages that you are generating doesn't have a back button. You will need to manually add these in if you want them (I'd guess you do).
My buttons don't render properly
In Ionic 4 the html element for a button is ion-button, in v3 you may have had something like this :
<button ion-button (click)="myclick()">Click My Button </button>
this button should now be written as
<ion-button (click)="myclick()">Click My Button</ion-button>
