Wednesday, August 29, 2018

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.


 - 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

3 comments:

  1. Cool, just made it myself, migrated ionic3 project with phaser2 to ionic4 with phaser 3. It took some time to make all fixed, but it was a smooth ride.... thumbs up

    ReplyDelete
  2. Wow what a great blog, i really enjoyed reading this, good luck in your work. Apple Developer Enterprise Program Certificate

    ReplyDelete