November 9, 2016
  • All
  • Ionic
  • Ionic 2

New: Better Error Reporting for Ionic Apps

Dan Bucholtz

I'm a software engineer for Io...

Hello Ionites! Today we’re excited to talk about a brand new version, 0.0.42, of @ionic/app-scripts, the build process for Ionic apps. This new version contains some terrific enhancements for developers. In our last blog post, we talked about how our short-term focus was going to be on improving the developer experience and speeding up the build process. We think this new release includes big improvements to both.

Faster Builds

We’ve made changes to how ionic serve works that results in 40-70% reduction in build time for file changes. We were able to achieve this through a combination of storing files in memory and optimizing the source-map that Webpack generates for development. Rather than generating a complete source map that maps all the way back to the original TypeScript source code, we’re following the example of Facebook’s create-react-app team and defaulting to a simpler, faster source map. The simpler source map is of the JavaScript code, instead of the original TypeScript source. We think this provides a good balance between build speed and ease-of-use when debugging.

If you prefer to stick with the original TypeScript source map, you can do so by setting the ionic_source_map property in the package.json file to source-map. Follow these instructions to provide a custom configuration. This will result in slightly longer build times.

Build Time Error Reporting

Ionic apps have a compile step to convert TypeScript and Sass into browser-friendly JavaScript and CSS. When a compile error is introduced while developing with the ionic serve command, Ionic will now show you the details of the error directly in the browser, instead of the “white screen of death” that leaves you guessing about what’s causing the error. The error detail pages are extremely useful for helping track down issues with code, and they’re beautiful, too! See an example in action below:

How do I get it?

There are a few very minor updates to the package.json file needed to run the latest version of @ionic/app-scripts. Please follow the instructions below to upgrade:

  1. Install the latest version of the ionic cli
    npm install ionic@latest -g
    

    Note: sudo may be required depending on your workstation set-up

  2. Update the project’s package.json file’s script section to look like this:

    ...
    "scripts" : {
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
    }
    ...
    

    Note: This is removing several deprecated Ionic scripts. If you have any of your own custom scripts, don’t remove them.

  3. Install the latest version of @ionic/app-scripts

    npm install @ionic/app-scripts@latest --save-dev
    

See the changelog here. Please let us know if any issues arise.

What’s Next?

We’re laser-focused on providing the simplest developer experience possible. Easy and fast never goes out of style. We’re continuing to work on speeding up the build process and providing useful feedback in a fast, efficient, and beautiful manner. We’re working on providing the new error details page experience for runtime errors too. We’re also continuing to work with the Angular team to improve the speed and error output for the ngc AoT compiler.

Conclusion

We just want to say a resounding THANK YOU to the Ionic community for all of the great feedback on the Ionic RC 2 release and the @ionic/app-scripts project. We’re thrilled and humbled by it! Please stay tuned; we have a lot of exciting news to share in the coming weeks. Have a great rest of the week and happy coding!


Dan Bucholtz

I'm a software engineer for Io...