Upgrade Points

Introduction

TODO

Breaking Changes (Biggest to smallest)

• Things that don't exist/not needed in v4
  • Remove IonicPage decorators from the pages (.ts) files
  • IonicPageModule doesn't exist. We use IonicModule and it doesn't involve routing.
• Routing (write on changes in routing, ion-tabs, ViewController)
  • Routing differences
  • Usage of Router instead of NavCtrl for navigation and getting params (instead of NavParams)
  • Changes in ion-tabs & ion-tab
  • Routes fallback
• Lifecycle hooks (write on how normal angular hooks which were also available in v3 are the only option in v4)
• Stylesheets (how styles need to be added as styleUrls. That wasn't needed in v3. Also, style scoping and :host)
  • For stylesheets, v3 used to have the element selector at the top e.g. about-page {} in the .scss files. That doesn't work in v4, so just remove the top level selector, or if you have to use top level element selector, use :host instead
• Ionic component changes (slot="start" replaces item-start, ion-navbar, ion-fab)
  • How the usage of ion-fab has changed from v3 to v4.
  • Use ion-toolbar instead of ion-nav-bar

Setting up your v3 app for upgrade

These are the things you can do to your v3 apps before beginning upgrade, to make it easier.

• Start using primitive values as route params instead of objects. Delegate to service where necessary.
• Replace ionic lifecycle hooks with angular ones. Eg: ionViewDidLoad -> ngOnInit or another one of angular's hooks.

Walkthrough

This is where we talk about steps of upgrading our app.

• Create a new v4 project
• Copy over the files from the src folder to the app folder in v4
• If you have used 3rd party libraries, make sure to copy those from v3 package.json to v4 package.json.
• The services now include providedIn: root in the @Injectable() decorator. e.g.

@Injectable({
  providedIn: 'root'
})