The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

ionic-meta

Hello Ionites! Happy Halloween! 🎃 I just wanted to give you a heads up about some changes to to our @ionic/app-scripts package. This package manages the build process for Ionic RC apps.

When we released Ionic RC a few weeks back, we made significant changes to the build process for Ionic apps. A few of these changes were necessary to make the leap to the production release of Angular 2, and a few were some of our ambitious ideas to simplify and dramatically improve the Ionic build process. Or goal is and will always be to reduce the amount of knowledge developers need to have about modern JS build tools to build Ionic apps.

The production release of Angular introduced several new concepts, including NgModules and Ahead-of-time compiling. These changes will be very positive for Ionic apps, but they have also caused some frustration for developers making the transition to Ionic 2 RC with Angular 2 Final. We’re really sorry about that. We recognize that we could have done a better job with documentation and examples during the transition. We are working around the clock to try to improve the developer experience with ngc, the Angular AoT compiler. We’re actively working with the Angular team to improve the quality of error messages and improve build times from ngc.

In addition, we underestimated the impact of some of our more ambitious changes with the build process. We chose a tool called Rollup to “bundle” our code together. Rollup is a tool that specializes in blazing fast start-up performance and a small bundle size. In our internal testing, everything went well for the most part. When we released this to the community, we found the tool to be challenging for developers to use when working with third party libraries that weren’t using the modern ES2015 module format yet. Working around this for commonjs and other types of modules required complicated configuration and in some cases just wouldn’t work at all. We are sorry for any frustration this may have caused, and we have a solution that is more forgiving and is going to work better for Ionic devs moving forward.

What’s changing

As a result of the challenges with Rollup, we are switching to a different bundling tool called Webpack 2. Webpack 2 is a more mature tool that we think will alleviate some of the challenges associated with the Ionic RC build process. Today, we are releasing a new version of @ionic/app-scripts that makes Webpack 2 the default bundler. We are still going to support Rollup, and if you’re using Rollup and happy with it, we encourage you to continue using it. Think of Rollup as a more strict, standards-focused build tool.

If you wish to keep using Rollup, there are two options: If you have a custom rollup.config.js file set-up, @ionic/app-scripts will continue to use it by default. If you haven’t needed to add a custom configuration file, you can follow the documentation to set it up.

If you’re familiar with Webpack, you might know that it usually needs a good amount of configuration before it’s ready to go. Our goal is to make Ionic’s build chain zero-configuration, while still enabling power users to add custom loaders and features they want to use. We feel very strongly that the JS build chain is too complicated today, so I hope you see our goals through the lens of trying to remove the build process as a point of complexity for Ionic development.

What do I need to do?

Please update the content of your tsconfig.json file to match the latest version we’re providing. After that, everything with the switch to Webpack 2 should be seamless once the latest version of @ionic/app-scripts is installed. If you run into any issues, please let us know.

To install the latest version, run the following command from the Ionic project directory:

npm install @ionic/app-scripts@latest

Roadmap

Over the next few weeks, we will continue to rapidly release new version of @ionic/app-scripts as we fix bugs and add functionality.

    Here’s what we view as high priorities:
  • Reducing build time even more
  • Improving source map quality
  • Improving developer experience with Angular AoT and NgModule
  • Providing hooks into the build process to inject custom data/logic
  • Making the build process more configurable
  • Continuing to iterate to shrink bundle size
  • Focusing on the unique build and performance requirements of Progressive Web Apps
  • Please let us know what you think of @ionic/app-scripts, and if you feel we’re missing the boat on anything. I’ve created a thread for discussion here.

    Conclusion

    We have made significant improvements to the build process since we released Ionic RC a few short weeks ago. If you haven’t updated, now is a great time to do so. We want to say a resounding THANK YOU to the Ionic community for sticking with us during the transition. All of the great issues and feedback on the @ionic/app-scripts project are very much appreciated. The feedback has been excellent and we are iterating quickly to provide a simple and powerful developer experience. Happy hacking!

    • Bo83

      The quotes below should be the mission statement for all of web development. Good job guys! Do whatever you have to in order to stay true to these goals!

      “Our goal is and will always be to reduce the amount of knowledge developers need to have about modern JS build tools to build Ionic apps.”

      “Our goal is to make Ionic’s build chain zero-configuration, while still enabling power users to add custom loaders and features they want to use. We feel very strongly that the JS build chain is too complicated today, so I hope you see our goals through the lens of trying to remove the build process as a point of complexity for Ionic development.”

    • Hendrik Grobler

      Keep up the great work guys, appreciate all the effort you put into making Ionic 2 great.

    • Sagiv Frankel

      Thank you for the update and hard work Dan!

      If I choose choose to stay with rollup for now – Is there any point in updating? Are there any benefits? Will my build time improve?

      • radoo

        I updated “unknowingly” this morning, and everything looks good and fast.
        Didn’t have the courage to unpin the dependencies in the package.json yet, but at least nothing broke anymore.

        I am interested in the answer to this exact question as well, but I am guessing the focus will be on webpack, so that’s probably going to be our choice.

    • parseINT32

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

    • Stefan

      Thank you so much, Ionic. I was so frustrated by the long time it took with each code update I made (from compiling to browser refresh). That time greatly reduced to below 1 second, which is awesome. Agility is back! 🙂

    • Allen Bierbuam

      Are there plans to document how we can build Ionic applications inside our own build chains?

      I love the ionic app-scripts for getting something up and running quick to test an idea, but for some of our production applications I need to integration the ionic build into our existing angular2 build setup. This is especially needed for the places we want to use Ionic for progressive web applications side-by-side with our other web applications.

      I filed a question about it on the docs site but maybe I should put this somewhere else: https://github.com/driftyco/ionic-site/issues/845

      Keep up the awesome work. The new build is great.

    • http://www.intecco.com.au Luke

      The beginning was challenging (a bit of shock) but overall experience is very good! Thanks for your hard work on IONIC2!
      It was a good change!

    • mixersoft

      Thanks for the effort here. This is a big deal for people who are making the transition from ionic to ionic2. I’ve spent more time dealing with build & module (TS import/export) issues than with ionic2 or angular2. That makes the transition very difficult and frustration. I think you need to have a `build –dev` environment that is customized for quick learning and a smooth transition before you offer a compact and efficient `production` build. That’s where most people are while you are still on RC0.

      I have managed to get rollup to work in my project (barely) but now I find that the switch to webpack has introduced some other build errors. ugh

      • mixersoft

        and now I have come to appreciate `rollup` — all my `webpack` runitme errors come from code that was `tree-shaken` away by `rollup`

    • Urs

      Thanks for the great work. So far, all the changes (yes, even the code breaking changes!) made so much sense….
      Don’t listen to complainers and keep going the way you think it’s best. It’s your framework.

    • Guibson

      How to install Meteor 1.4 using the latest version of Ionic2?!
      In tutorials in the website oficial of “angular-meteor”, they use old version of Ionic, with gulpfile.js and webpack configurations…. How I can use meteor without gulpfile and webpack?? TY!

    • Lortivar

      Sorry if this is a dumb question but will this speed up my Ionic 1.3 builds? Thanks

    • tourdeforce

      Sorry I am new to this – I can’t, always get this. Any help?

      ├── UNMET PEER DEPENDENCY @angular/compiler@2.1.0
      ├── UNMET PEER DEPENDENCY @angular/core@2.1.0
      ├── UNMET PEER DEPENDENCY @angular/platform-server@2.1.0
      ├── @ionic/app-scripts@0.0.41
      └── UNMET PEER DEPENDENCY rxjs@5.0.0-rc.2