April 7, 2017
  • All
  • Ionic

Ionic 3.0 has Arrived!

Brandy Carney

We are so excited to announce the release of Ionic 3.0! This version jump may worry some of you, but don’t let it! The required changes to go from 2.x.x to 3.0.x are minimal. We got you! 🙂

But… why 3.0?

Remember when we said this in our Ionic 2.0.0 final blog:

What’s next?

Ionic 3 of course! (…joking!)

Well, we were joking about a completely new framework, but this version change is not for that reason.

We’ve recently switched over to use Semver versioning. This means that we will be following these guidelines when releasing new versions of Ionic.

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.

When we upgrade our internal version of Angular, we are bumping the Ionic version according to whether the Angular upgrade is major, minor or a patch. Since this release upgrades Ionic to be compatible with Angular 4.0.0 and it also has incompatible API changes, it had to be a major release. To see a full list of the breaking changes in this release, check out the changelog.

What’s New?

For a full list of changes and steps to upgrade, see the changelog.

Note: Starting a new app? The --v2 flag will still be required for now. This doesn’t mean you’ll get a 2.x.x version of Ionic, just the latest/current version that has been released.

Angular 4.0.0

We have updated Ionic to be 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. For more information, see the Angular 4.0.0 blog.

TypeScript 2.1 and 2.2 compatibility

Like Angular, Ionic has been updated to work with a more recent version of TypeScript. 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. For more information, see the TypeScript release notes.

IonicPage Decorator

Gone are the days of passing a deep link configuration to your application’s root module. You can now set up deep links by using the @IonicPage decorator. This makes it easier to set up lazy loading in your application, set the priority of lazy loading pages, and customize the configuration for each individual page.

Here’s an example of setting some of the optional properties for an @IonicPage:

@IonicPage({
  name: 'my-about',
  segment: 'about-page'
})
@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage { }

For more information, see the IonicPage API documentation.

Lazy Loading

Ionic 3.0 includes support for lazy loading. It is not the default yet as we have found some minor issues with it. We are actively looking for testers and to hear community feedback. The changes affect the file structure and navigation of your application, but they will ultimately speed the application up. To get started testing lazy loading in Ionic 3.0 see the lazy loading document.

Known Issues

There are some known issues with navigation that will be worked on soon:
– The URL is not updating properly when pushing a page on a root level ion-nav that has an ion-tabs navigation stack in the history.
– Deep linking is currently only working with one navigation stack, so it will not work properly with split pane containing 2+ navigations side by side.

What’s Next?

Our main focus will continue to be on improving application start-up speed and performance. We will continuously be incorporating user feedback into our lazy loading implementation. In addition to this, features to improve our support for desktop will be added. As always, we will still be fixing known bugs in our components and navigation.

Thank You

A huge thank you to everyone who has tested and given us feedback. We know that changes still need to be made, and we are working hard to make them happen. We appreciate each and every one of you. <3


Brandy Carney