Migrating of an existing application from Ionic 3 to 4

Migrating of Ionic 3 Project to Ionic 4

What is ionic: Ionic is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies (HTML, CSS, and JavaScript).

Ionic Framework always focus on frontend user experience. It’s easy to learn and integrates nicely with other libraries or frameworks, such as Angular. Currently, Ionic Framework has official integration with Angular, but its support for Vue and React are in development.

migration from ionic 3 to 4 is very straightforward. 

Migrating from Ionic 3 to 4: You need to follow below steps to migrating an existing application from Ionic 3 to 4.Steps are follows -

Before this please make sure the you have latest version of Node.js and npm are installed on your system.

- First, Install the latest version of Ionic

$ npm install -g ionic

The -g means it is a global install.

- Now create a new project using the blank template -

$ ionic start myApp blank --type=angular

- Project structure : 

- Copy your ionic 3 Angular services from src/providers to src/app/services

Services should include { providedIn: 'root' } in the @Injectable() decorator. For details, please review Angular provider docs. https://angular.io/guide/providers

- Copy the app's other root level items (pipes, components, etc) of your ionic 3, Keep in mind that the project directory structure has been changed from src/components to src/app/components, etc.

- Now copy your ionic 3 global Sass styling from src/app/app.scss to src/global.scss

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

  1. Emulated Shadow DOM is turned on by default.

  2. Page/component Sass should no longer be wrapped in the page/component tag and should use Angular's styleUrls option of the @Component decorator.

  3. RxJS has been updated from v5 to v6.

  4. Certain lifecycle hooks should be replaced by Angular's hooks.

  5. Markup changes may be required. Check this URL: https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md#breaking-changes

 - Including third-party modules: If your v3 application depends upon third-party modules like moment etc., make sure to install them in the v4 project too.

Breaking Changes: Check this URL for more information (https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md#breaking-changes)

A list of the breaking changes introduced to each component in Ionic Angular v4 -

Action Sheet

Alert

Back Button

Button

Chip

Colors

Content

Datetime

Dynamic Mode

FAB

Fixed Content

Grid

Icon

Infinite Scroll

Item

Item Divider

Item Options

Item Sliding

Label

List Header

Loading

Menu

Menu Toggle

Modal

Nav

Navbar

Option

Overlays

Radio

Range

Refresher

Scroll

Segment

Select

Spinner

Tabs

Text / Typography

Theming

Toolbar