The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

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!

  • Jack Vial

    Nice! Error reporting looks awesome!

  • XepeBlanco

    I just tested the Error reporting and it looks great !. Nice job 🙂 and thanks !

  • Ikhsan Agustian
    • Justin Willis

      Hello, sorry you are running into issues! Would you mind opening up an issue here https://github.com/driftyco/ionic-app-scripts/issues on our Github?

    • Mike Hartington

      Looks like the hook is not executable on windows. Just need to change that for that file. For Ionic 2, the hook should not be needed any more, so you can delete that `after_prepare` folder

  • parseINT32

    Thank YOU

  • cocowalla

    Really? You’re breaking Typescript source maps *again*?! And *deliberately* this time?!

    I really thik Typescript source maps should work by default, with the faster Javascript maps being the option that has to be configured.

    • Mike Hartington

      We talked about it and agreed that faster builds were a better default. But you can configure them, as we mentioned above.

      • Roel de Brouwer (werk)

        I tried to configure them but that does not work in my case. I still get js files in webpack://.
        Don’t just change a default suddenly!

  • Frank Paepens

    Ok, the upgrade went smoothly! Thanks for the work!! The javascript code is just fine for debugging…

    Something I’m still missing when working & debugging in Chrome is that my code changes are not reflected after a live reload.
    I have to stop & start “Ionic serve” manually to see my code changes. (both is Javascript or Typescript mode)

    Is there somewhere an option to make this work?
    Thx!!

    • francesco

      Exactly same problem!

      • bigjump

        Me too!

    • danbucholtz

      @bepaepef:disqus , @disqus_XTAj05HMEL:disqus , @bigjump:disqus , can you provide some more info? I’m not seeing this.

      Thanks,
      Dan

      • bigjump

        Sure:

        Your system information:

        ordova CLI: 6.3.1
        Ionic Framework Version: 2.0.0-rc.2
        Ionic CLI Version: 2.1.7
        Ionic App Lib Version: 2.1.4
        Ionic App Scripts Version: 0.0.42
        ios-deploy version: Not installed
        ios-sim version: Not installed
        OS: Windows 10
        Node Version: v6.9.0
        Xcode version: Not installed

  • Rodolfo Nogueira

    The error detail pages are awesome!!! Thanks!!

  • Rodolfo Nogueira

    The error details page runtime errors will be very useful! Thanks!!

  • Frank Paepens

    I’m also unable to deploy my app to an Android device since this last update (simalar to issue Ikhsan).

    https://uploads.disquscdn.com/images/65027584d57c5781e8d8ba39b8483e4f00f7e7fb521a8658fad8b7d7b2a432d6.png

    • Mike Hartington

      Could you post a gist of the out from ionic run android -d

      • Frank Paepens

        Problem solved: after running a second time it works again on Android!

  • Allen Bierbuam

    Will building ionic apps without @ionic/app-scripts continue to be supported or do you anticipate build steps will end up in app-scripts that are required to use Ionic?

    (I ask because we are setting up our ng2 pipeline right now and have been planning to build Ionic web apps as part of our standard build process so it is just one more webapp instead of using a custom build for the ionic app)

    • yesimahuman

      Yep, a big goal of this is to enable you to fully customize the build process if you like. Of course, we can’t support your custom build, but we want to enable it. Just change your npm build script command in package.json

  • Ebrahim Hatim Bangdiwala

    Awesome build speeds …

    One issue though ionic run android -l -c builds the app in prod mode and the live reload doesn’t work after the build / app launch on device …

    Help us out here …

    • Siddharth Joshi

      Yep, I have same problem like You..

      Ionic Serve works fine.. But ionic run android -l -c builds the app but doesn’t works live reload…!!

      • Mike Hartington

        Hey yall, this is a known thing. We’ll be addressing this in the next few releases.

    • Kai Birkenstock

      try: ionic build android -lc
      and in another shell: ionic serve
      that will do the trick

      • Siddharth Joshi

        thanks for temporary solution @kaibirkenstock:disqus its working, may be creator of ionic solve this.. soon..!!

        • Kai Birkenstock

          i hope so too 🙂

      • Ebrahim Hatim Bangdiwala

        Thanks @kaibirkenstock:disqus for the trick …

        Waiting for the Ionic Team to fix the issues soon …

  • rcojocaru

    Awesome job, especially with the error reporting. Live reloading breaks sometimes and when I was getting a blank screen it was annoying not knowing immediately if there are compilation errors or it’s just the live reload breaking. Thank guys!

  • http://miles-by-motorcycle.com/engineeringblog.html Yermo Lamers

    In the updates to the package.json scripts sections described above did you mean to imply serve:before, emulate:before, et all should be removed?

  • k3x

    Thanks for the amazing work.

    One question, can i use async await right now? Because last week when i tried it worked on real device but failed to even run on emulator.

  • Teoh Tuan Tian

    Thanks for the update.
    “ionic serve –lab” seems like not working.

  • Thomas Opiolka

    awesome update… can’t wait for the next one 🙂

  • Roel de Brouwer (werk)

    Why don’t you make Faster Builds optional! I’m very annoyed that I from one day to another can’t find my ts files anymore when I try to debug.
    Setting “ionic_source_map” (or “ionic_source_map_type”) in “config” of package.json does not work!