Upgrade Notes

This page contains the notes for upgrades

Tooling

1. ionic serve doesn't work for now. Use ng serve.
2. ionic v4 depends on angular and rxjs 6.x.

Upgrade

• Installed ionic cli (rc) npm i -g ionic@rc
• Created a new project ionic start v4-ion-meetups tabs --type=angular

The following steps copy listed directories from v3 project to listed destinations in v4 project.

• Copied /src/pages to /src/app/pages
• Copied /src/models to /src/app/models
• Copied /src/providers to /src/app/providers.
• Copied /src/utils to /src/app/utils.

Now getting error Can't resolve module ionic-angular. Fixing this.

• From all the individual pages' modules, replaced IonicPageModule and IonicPageModule.forRoot... with IonicModule.

• Replaced ionic-angular with @ionic/angular.

• There's no ViewController in v4. If you're using it for modals, replace it with ModalController from @ionic/angular.

• ActionSheetController#create now returns a promise for the action sheet, instead of action sheet itself.

Upgrading routes:

1. Getting the container tabs page to work first

• Added a routes definition with only Tabs page, and blank redirect routes to start with. Also imported the routes in TabsPageModule.

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage
  },
  {
    path: '',
    redirectTo: '/tabs',
    pathMatch: 'full'
  }
];

Getting error that root is not a known property of ion-tab. Expected since ion-tab has a different API/usage in v4.

• Renamed tabIcon to icon for ion-tab element.
• Replaced [root]... with href= attribute.
• Renamed tabTitle to label.
• ion-tab also needs a child element ion-router-outlet. This new element takes a name attribute which helps in specifying which components go in which tab while writing routes.

This gets the tab page working, but obviously shows blank tab content.