The Changes From Ionic 2 To Ionic 3

The change from Ionic 2 to Ionic 3

The change from Ionic 2 to Ionic 3 will be nothing like that change from Ionic 1 to Ionic 2. Ionic, like Angular, is just using a different versioning system now (Semver versioning).

Given a version number MAJOR.MINOR.PATCH, increment the:

• MAJOR version when you make incompatible API changes.

• MINOR version when you add functionality in a backwards-compatible manner, and

• PATCH version when you make backwards-compatible bug fixes.

which means that Ionic 3 is just a major update to the framework. It is not an entirely new framework.

What’s New?

Ionic 3 is compatible with Angular 4.0.0. This upgrade introduces new features, smaller and faster applications, support for a more recent version of TypeScript, and much more.
Like Angular, Ionic has been updated to work with a more recent version of TypeScript such as TypeScript 2.1 and 2.2. This upgrade will improve the build time and type-checking in your application. It also introduces support for mix-in classes, the ability to use async await in Ionic, and much more.

One of the main features of Ionic 3 is @IonicPage decorator. we can now set up deep links by using the @IonicPage decorator. This makes it easier to set up lazy loading in our application, set the priority of lazy loading pages, and customizes the configuration for each individual page.

For example:

@IonicPage({
  name: 'my-about',
  segment: 'about-page'
})

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})

export class AboutPage { }

Ionic 3.0 includes support for lazy loading. The changes affect the file structure and navigation of our application, but they will ultimately speed the application up.

Bug fixes:

• alert: add missing cssClass property for buttons.

• content: remove scroll bouncing from desktop

• content: enable scroll listener automatically

• datetime: emit ionCancel event on backdrop click

• datetime: remove unnecessary calls and performance improvements

• infinite-scroll: don't call complete if the state isn't loading

• item-sliding: add forwardRef for item options

• navigation: update the URL if there are no children navs

• slides: negative number indicates position starting at end

• split-pane: add RTL support

• virtual-list: fix the rendering of the first item

• virtual-list: update compatibility with angular

Code Refactoring:

• grid: remove the old grid system

• typography: remove the native element selectors

Features:

• module-loader: add caching for ngModuleLoader on load

• module-loader: add preloadModules config option, set to false

• module-loader: preload modules based on priority

• module-loader: run outside of angular and in requestIdleCallback

• navigation: @DeepLink decorator

• navigation: add optional priority to deep link config

• split-pane: adds enabled input

• split-pane: sizing via scss variables

• util: system.js ng-module loader