Ionic 4 Upgrade: Updating From Ionic 3 to Ionic 4/Angular 6
Ionic 4 is not yet released (Alpha) but you can upgrade your Ionic 3 project to use Ionic/Angular v4 as of this moment if you are comfortable using alpha code. The Ionic CLI 4 is also in R.C version and you can use it to generate Ionic 4/Angular 6 projects and use them as the base to migrate your Ionic 3 apps. In this Ionic 4 migration guide, we'll see by a simple example how you can update a demo Ionic 3 project to Ionic 4.
Creating a New Ionic 4 Project
Before you can create a new Ionic 4 project go ahead and install the latest version of Ionic CLI (v4) using the following command from your terminal:
npm install -g ionic@rc cordova
After installing the Ionic CLI 4. You can now run the following command to generate a new Ionic 4 project based on Angular 6:
ionic start ionic4upgradedemo blank --type=angular
Creating a new Ionic 4 project based on Angular is the first step toward migrating your Ionic 3 application to Ionic 4 (with Angular). To generate a project based on Angular we are using
We are also specifying the blank starter template but you can use sidemenu or tabs templates depending on what your Ionic 3 application is using for easing the migration process.
When writing this tutorial, only Angular is supported with the
If you look at the directory structure of your Ionic 4 project you'll see that's similar to Angular 6 projects except for some differences specific to Ionic.
First, you need to notice that pages and other things in Ionic 3 that live under the
src folder now live under the
src/app folder in Ionic 4.
RELATED TUTORIALSAngular Router Tutorial: Learn Angular 7|6 Routing & Navigation by Example
Angular 6|7 RxJS 6 In-Depth Tutorial & Example
Angular 7 Tutorial Course — Build a Portfolio Web Application with Angular
What is an Angular 6|7 Workspace?
Angular 7 Tutorial: Login & Reactive Form Example with Validation
Angular 7|6 Tutorial: Using Angular HttpClient with Node & Express.js - Example POST Requests
Angular 7|6 Tutorial: Building and Submitting a Form (ngModel | ngForm | ngSubmit) to a Node and Express.js Authentication Server