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.

** Getting about page loading **

1. In about.module.ts, added entry component with AboutPage component. Also, added a RouterModule.forChild import to the module with blank path, AboutPage component and about outlet. This outlet tells this route which router outlet to target when loading. Since we're lazy loading, we need to specify this outlet in both - tabs module and about page module.

2. In 'tabs.module.ts', add a new child route for main tabs route:

  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'about',
        outlet: 'about',
        loadChildren: '../about/about.module#AboutPageModule'
      }
    ]
  },

This allows lazy loading AboutPage component into ion-router-outlet with the name about inside tabs.html.