Ionic 3 Beta Available Now

The Ionic 3 beta with Angular 4 built in is available now! While Ionic hasn’t yet announced it as of this writing, it’s already out there. This is for early experimenters only!

Update 3/28/2017: Ionic has now officially released the beta, but any lazy loading is currently broken on Windows. Post has been updated to the latest Ionic release and to include an example of lazy loading, but fyi this will not work in Windows. Github project has been updated as well.

Install Dependencies

I ran into on and off issues with the beta version of the Ionic CLI, so for now I’d say use 2.2.1.

Create a new blank starter (right now it still creates an “Ionic 2” version of the starter, this will probably be fixed soon but go with it for now). Now update your package.json as follows:


{
  "name": "ionic-3-test",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@ionic-native/core": "3.2.2",
    "@ionic-native/status-bar": "3.2.2",
    "@ionic-native/splash-screen": "3.2.2",
    "@ionic/storage": "2.0.1",
    "ionic-angular": "3.0.0-beta.2",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.4.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.2.2",
    "typescript": "~2.2.1"
  }
}

Now run npm install to update all your dependencies.

Update the Starter Project Code

You can find the blank starter code for version 3 here: https://github.com/driftyco/ionic2-starter-blank/tree/3, but as of this writing some of it isn’t quite right. Lazy loading is still changing so this is subject to change. Check the github that goes with this post for a working version: https://github.com/roblouie/ionic-3-beta. The resulting files look like this:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { MyApp } from './app.component';

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    SplashScreen,
    StatusBar,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';


@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage = 'HomePage'; // Root page set via string for lazy loading

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

pages/home/home.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';

import { HomePage } from './home';

@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
  ],
  entryComponents: [
    HomePage,
  ]
})
export class HomePageModule {}

pages/home/home.ts

import { Component } from '@angular/core';
import { NavController, IonicPage } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {}
  pushPage(){
    this.navCtrl.push('SecondPage'); // Pushed via a string for lazy loading
  }

}

One thing to note is I push ‘SecondPage’ here, but I haven’t listed that code. It’s just another page exactly like the home page but named SecondPage. See the updated github project for the full example: https://github.com/roblouie/ionic-3-beta

You can see that Ionic has moved to a more modular approach which is welcomed!

Conclusion

This will get you up and running in Ionic 3 right now. I imagine soon Ionic will release better starter kits so you can just kick it off from the command line without making these changes, but until then have fun experimenting with Ionic 3! If you run into issues, check out my github sample project here: https://github.com/roblouie/ionic-3-beta