How to migrate Ionic Cordova 3 to Ionic Cordova 5?

Question

I am having Ionic 3 project and I have to upgrade to Ionic 5. Kindly need the best way to upgrade the project.

Canine

Answer 1

You can do that in two steps.

Ionic 3 to Ionic 4

For a complete list of breaking changes from Ionic 3 to Ionic 4, please refer to the breaking changes document in the Ionic core repo.

In Ionic 4, the package name is @ionic/angular. Uninstall Ionic 3 and install Ionic 4 using the new package name:

npm uninstall ionic-angular
npm install @ionic/angular

The general process when migrating an existing application from Ionic 3 to 4:

1. Generate a new project using the blank starter (see Starting an App)

2. Copy any Angular services from src/providers to src/app/services

   • Services should include { providedIn: 'root' } in the @Injectable() decorator. For details, please see Angular provider docs.

3. Copy the app's other root-level items (pipes, components, etc) keeping in mind that the directory structure changes from src/components to src/app/components, etc.

4. Copy global Sass styling from src/app/app.scss to src/global.scss

5. Copy the rest of the application, page by page or feature by feature, keeping the following items in mind:

   • Emulated Shadow DOM is turned on by default
   • Page/component Sass should no longer be wrapped in the page/component tag and should use Angular's styleUrls option of the @Component decorator
   • RxJS has been updated from v5 to v6 (see RxJS Changes)
   • Certain lifecycle hooks should be replaced by Angular's hooks (see Lifecycle Events)
   • Markup changes may be required (migration tool available, see Markup Changes)

In many cases, using the Ionic CLI to generate a new object and then copying the code also works very well. For example: ionic g service weather will create a shell Weather service and test. The code can then be copied from the older project with minor modifications as needed. This helps to ensure the proper structure is followed. This also generates shells for unit tests.

Ionic 4 to Ionic 5

Migrating an app from 4.x to 5.x requires a few updates to the API properties, CSS utilities, and the installed package dependencies.

For a complete list of breaking changes from 4.x to 5.x, please refer to the breaking changes document in the Ionic core repo.

For Angular based projects, you can simply run:

npm install @ionic/angular@latest @ionic/angular-toolkit@latest --save

For additional information and instructions check Migration Guide.

Exfoliation