The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

Howdy, folks! I just wanted to share a few updates on things and talk about an amazing new feature in the Ionic build process.

Framework Updates

RC3 has shipped 🍻 ! We’ve been hard at work closing issues and improving the performance of our components. Three components in particular—Menu, Sliding Items, and DateTime—have had significant work done to improve their performance. For example, here are before and after shots of Menu from the developer tools:

Before
before

After
after

We’re excited for you to test these out and see the performance increase!

Error Reporting

Last week, both Max and I shared videos about the new error reporting information in App Scripts. This way, we can remove the feared “white screen of death”. Now, if something happens during your build, you’ll get that information added right away, instead of a blank screen.

We wanted to go even further, so we’ve improved on this and have also added run time error catching! For those who aren’t quite sure what this is, imagine this situation…

You’re testing your app, tapping through screens, then all of a sudden…nothing. The entire app stops, and you can’t go back or go forward to any pages. What happened?

We wanted to do away with that, so we’ve added a custom ErrorHandling class to Ionic that ties into the App Scripts dev server. Here’s what it looks like:

run-time-error

If for some reason you run into an error, now we can display something meaningful and provide the right information. While this is cool, we wanted to go beyond that and add a new bit of UI to this.

run-time-error-overlay

If you do get an error and want to reload the app, you can hit ctrl-shift-8 (cmd-shift-8 for mac) to display a list of debug options. Currently, we only have the option to reload the app, but we’ll be expanding to include a few other options. What’s even better is that this sort of functionally is also available on a real device with live-reload!

$ ionic run android -lc

Once it’s deployed, just shake the device, and the debug action sheet will be displayed. But what about turning it off for production builds? This is handled automatically, in order to avoid any…awkward moments in a production app.

How to get it

In order to get this new feature, you’ll want to make sure you have the most up to date CLI.

$ npm install -g ionic


$ ionic -v
# should return at least 2.1.12

If you’re starting a new project, you should be good! But if you have an older project that you want to update, you’ll want to update the following packages.

$ npm install [email protected] --save
# get RC3 of ionic-angular


$ npm install @[email protected] --save-dev
# get the latest app-scripts package

For a complete list of what your package.json should be updated to, check out the RC3 Changelog

After installing those packages, open src/app/app.module.ts and import ErrorHandler from angular and IonicErrorHandler from ionic-angular.

import { NgModule, ErrorHandler } from [email protected]/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';

@NgModule({

  // Here we tell the Angular ErrorHandling class
  // that it should be using the IonicErrorHandler class for any errors
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})

That’s it! Now, any runtime errors can be better handled by Ionic’s build tools.

Ionic Module Template

We’ve heard many questions from developers trying to build reusable Angular 2 and Ionic 2 modules, and how to get them to work with Angular’s ngc and Ahead-of-Time compiling. To help, we’ve put together a starting template that you can use to build your own modules. It’s a very new release, so please let us know if you run into issues or have questions and we’ll get it sorted.

Ionic Module Template

So what’s left?

With App Scripts reaching a stable point, the framework is team focusing on the final batch of bug fixes and performance improvements, meaning…we’re in the final stretch here! It’s been a crazy road to get here, and from everyone at Ionic, we couldn’t have done it without your input and help in testing things. So, keep an eye out as we go heads down and work on getting 2.0 Final out the door.

Cheers!

  • Davo
    • http://www.badpenguin.org/ Antonio Gallo

      thanks! they keep omitting how to correctly update to a working version the libraries inside package.json

      • http://www.codingandclimbing.co.uk Dave

        Can you please post the commands to actually update ionic from rc 2? They aren’t consistent with their posts and I’m never sure what commands to actually run and I don’t want to screw up my project. Thanks.

        • http://www.badpenguin.org/ Antonio Gallo

          Its not safe:

          1) ionic start test1 –v2
          2) then updated packages.json from https://github.com/driftyco/ionic/blob/master/CHANGELOG.md#200-rc3-2016-11-17 and their blog posts
          3) npm install [email protected] –save
          4) npm install @[email protected] –save-dev
          5) npm -g install [email protected]
          6) rm -fR node_modules && npm install

          • http://www.codingandclimbing.co.uk Dave

            Thanks very much.

          • Mike Hartington

            I’ve gone back and updated the changelog to include the list of deps that you need.

            https://github.com/driftyco/ionic/blob/master/CHANGELOG.md#updating-to-200-rc3

          • http://www.badpenguin.org/ Antonio Gallo

            thanks. so latest suggested app-script is 0.0.45 not 0.0.46 ?

          • Mike Hartington

            go with 0.0.46. Always grab the latest

  • Randolph Octavio

    FAB lists, seems not to work as usual. They do not get custom color from theme/variables.scss. Any one else with this issue?

    • Nicolas Boyer

      Same here.
      I had to use custom CSS.

  • Iván Sánchez

    Thanks for all the work you guys are doing <3

  • Young Park

    Now I’m getting blank screen with RC3 ..

    • Mike Hartington

      Can you post the output from your builds? Chances are something didn’t work correctly at all

      • Young Park

        Yeah i did upgrading from rc2 to rc3 but failed. I started with fresh new project with rc3 copying over src folder with no success. I wont have time to do this week but later next week.

        Happy Thanksgiving! I love ionic… ! Just need clear way to update the libs.

      • Young Park

        https://github.com/driftyco/ionic/issues/9326

        I have the same issue as this guy wrote in this ticket. I have dynamic themes applied and my $color variable is very long. twice as much as what this guy posted in the ticket.

  • Sada Sadasd

    You must be kidding with this stable version of app scripts. There is no live reload of css, how could you screw something that important so much?!

    • David Collingwood

      The live reloading definitely supports css…better check your setup?

      • Sada Sadasd

        Just created new ionic tab project to check. Simple changing header color works only after reload of the page. In earlier versions css sometimes crashed after changing, but this is an ultimate screw up…

        • Mike Hartington

          This definitely does not sound normal. CSS reload definitely does works https://youtu.be/vdY4aqOnc3c.

          Like David Collingwood stated..there must be something wrong with your setup. If you open an issue on the app-scripts repo, and help us recreated it, we can figure out whats going on.

          github.com/driftyco/ionic-app-scripts

          • Sada Sadasd

            Thanks for taking time in creating a vid. I dont know what could I have wrong in my setup. App scripts 0.0.42 works fine with css, app scripts 0.0.46 shows “building” when i change sass file, but nothing changes until I reload a page. I dont think there were any changes in package.json from 0.0.42 to 0.0.46, so I dont even know where to look for an error. Greetings

          • Mike Hartington

            Hmm, something is off. Could you open an issue on the app-scripts repo and work with us there?

          • Sada Sadasd

            As James posted above, the issue was about “websocket error that says unable to reach 0.0.0.0 or something of the sort…”.

            Running `ionic serve –address 127.0.0.1` solved a problem. I hope you can get a solution out of it, cos I’m sure I’m not the only one with this kind of problem.

      • http://www.badpenguin.org/ Antonio Gallo

        if you use the templates provided by the start command it just does not works. onto the forum there is some guy that posted some hacks to package.json … however it does not work with emulator or devices 🙁 i hope it will get fixed soon

        • Sada Sadasd

          Can you paste the link of this fix?

    • James

      Had the same issue 🙂 If you check the browser you’ll see a websocket error, I bet the address says unable to reach 0.0.0.0 or something of the sort…

      Run the cmd as follows `ionic serve –address 127.0.0.1`. This should fix it 😉

      • Sada Sadasd

        Nice one. Thank you 🙂

  • cocowalla

    Typescript source maps are gone *yet again*?! I still have `”ionic_source_map”: “source-map”` in my package.json since since the last breakage, but now that isn’t working either.

  • http://bgraphic.no Benedicte Raae

    With the latest app-script what should the script section of package.json look like with a standard ionic project structure?

  • https://github.com/stefanhuber Stefan Huber

    Thx for your work!

    On thing which I don’t understand. In the docs, it is written (http://ionicframework.com/docs/v2/resources/app-scripts/) that rollup is used. In my builds currently webpack is used? I definitely have rc3!

    I have no clue how to integrate unit testing! You built such a great framework, please also integrate testing support!

    Currently with ionic only malware can be produced. As it goes: Software without testing is malware!

  • Loco Van Coco

    You guys are amazing!!!

  • Frank Paepens

    Thx a lot!! Initially I had a lot of problems with the upgrade. But then I uninstalled/reinstalled both Ionic & Cordova and copied all my sources to a new empty project.
    Finally I can debug without restarting “ionic serve” all the time.
    Best version so far!!

  • Rodolfo Nogueira

    AWESOME!!!!

  • Anton

    Good day, Mike ! When it will be possible use pinch to zoom images or other content by default ? With out plugins and crutches ?

    • Anton

      We’re also using that native plugin. But there MUST be a way to do this in HTML.

  • KaFu

    I created a new project with RC3 but I got errors when I’m trying to implement a custom directive. When I try to import it in app.module I got this error:

    Could not compile ‘myDirective’ because it is not a component.

    This make sense. But when I only implement it in declarations array, the dirctive is undefined when I use it. Can you please help me.

    • KaFu

      Oh, I got my misstake. I’m so sorry. You guys do a really really good job!

  • Fernando Cebollada Aucejo

    I’m sorry for my ignorance I’m new to the ionic world, in fact, I’ve never worked with ionic1 ….. My question is:

    I created a login form in RC2 and when I click on the input element and the keyboard appears, I can find a correct behavior, the keyboard appears and if any element is covered by the keyboard you can move the form to see the rest Of the Components.

    With RC3 I did the same, but this case if the keyboard covers something that the roll you make is bigger than RC2, then in some case if you close the keyboard the view does not fit correctly.

    I try to use some overflow tags in the ion content-scroll = “false” but is not fixing this behavior.

    Can anyone help me?
    Kind regards

    • Fernando Cebollada Aucejo

      For the moment i try to use the old package.json configuration (from RC2) and the issue is not happening again

  • D Riley

    After upgrading to RC3 I’m getting UnHandled Promise rejection… polyfills.js… No provider for ElementRef!” Any help would be appreciated?

    package.json dependencies:

    “dependencies”: {
    “@angular/common”: “2.1.1”,
    “@angular/compiler”: “2.1.1”,
    “@angular/compiler-cli”: “2.1.1”,
    “@angular/core”: “2.1.1”,
    “@angular/forms”: “2.1.1”,
    “@angular/http”: “2.1.1”,
    “@angular/platform-browser”: “2.1.1”,
    “@angular/platform-browser-dynamic”: “2.1.1”,
    “@angular/platform-server”: “2.1.1”,
    “@ionic/storage”: “1.1.6”,
    “ionic-angular”: “2.0.0-rc.3”,
    “ionic-native”: “2.2.3”,
    “ionicons”: “3.0.0”,
    “moment”: “^2.15.2”,
    “rxjs”: “5.0.0-beta.12”,
    “zone.js”: “0.6.26”

    https://uploads.disquscdn.com/images/c0c89e9dba305e11c8e798bf444a356a62772c02ac65ebb314839f90b93568d0.png

    • D Riley

      Found the problem… Somewhere/somehow in the upgrade process I added “IonicApp” as a provider in app.module.ts… My project now compiles and doesn’t have any runtime error… At least no worse than before the update… -_-

  • Praven Moorthy

    ionic run ios –device –livereload. It stopped working after upgrading to rc3 . It does load the app but it does not run any native access and the status bar does not work either.

    System information:
    Cordova CLI: 6.4.0
    Ionic Framework Version: 2.0.0-rc.3
    Ionic CLI Version: 2.1.13
    Ionic App Lib Version: 2.1.7
    Ionic App Scripts Version: 0.0.45
    ios-deploy version: 1.9.0
    ios-sim version: 5.0.10
    OS: macOS Sierra
    Node Version: v6.5.0
    Xcode version: Xcode 8.1 Build version 8B62

  • Yannik

    Hi all,
    I’ve updated to latest release. The build works fine, but when i install it to the device im getting the following error:
    Error: Cannot find module “./app.module.ngfactory”.

    What i’ve tried:
    remove the tmp folder
    remove the node_modules folder
    npm install

    but it still does not work.. has anyone the same issue ?

  • RUB Labs

    After I installed this package:
    $ npm install @[email protected] –save-dev

    A white screen appears after the splash takes about 4 seconds.