{"id":1501,"date":"2016-11-09T22:05:57","date_gmt":"2016-11-09T22:05:57","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=1501"},"modified":"2016-11-21T17:38:47","modified_gmt":"2016-11-21T17:38:47","slug":"improvements-to-ionic-build-process","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/improvements-to-ionic-build-process","title":{"rendered":"New: Better Error Reporting for Ionic Apps"},"content":{"rendered":"<p>Hello Ionites! Today we\u2019re excited to talk about a brand new version, <code>0.0.42<\/code>, of <code>@ionic\/app-scripts<\/code>, the build process for Ionic apps. This new version contains some terrific enhancements for developers. In our <a href=\"https:\/\/ionic.io\/blog\/ionic-build-process-updates\/\">last blog post<\/a>, 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.<\/p>\n<p><!--more--><\/p>\n<h3>Faster Builds<\/h3>\n<p>We\u2019ve made changes to how <code>ionic serve<\/code> 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\u2019re following the example of Facebook\u2019s <code>create-react-app<\/code> 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.<\/p>\n<p>If you prefer to stick with the original TypeScript source map, you can do so by setting the <code>ionic_source_map<\/code> property in the <code>package.json<\/code> file to <code>source-map<\/code>. <a href=\"https:\/\/github.com\/driftyco\/ionic-app-scripts#custom-configuration\">Follow these instructions<\/a> to provide a custom configuration. This will result in slightly longer build times.<\/p>\n<h3>Build Time Error Reporting<\/h3>\n<p>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 <code>ionic serve<\/code> command, Ionic will now show you the details of the error directly in the browser, instead of the \u201cwhite screen of death\u201d that leaves you guessing about what\u2019s causing the error. The error detail pages are extremely useful for helping track down issues with code, and they\u2019re beautiful, too! See an example in action below:<\/p>\n<div class=\"video-container\">\n              <iframe data-src=\"https:\/\/www.youtube.com\/embed\/NaBlMuhxrzg\"frameborder=\"0\" allowfullscreen src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n            <\/div>\n<h3>How do I get it?<\/h3>\n<p>There are a few very minor updates to the <code>package.json<\/code> file needed to run the latest version of <code>@ionic\/app-scripts<\/code>. Please follow the instructions below to upgrade:<\/p>\n<ol>\n<li>Install the latest version of the ionic cli\n<pre><code>npm install ionic@latest -g\n<\/code><\/pre>\n<p>Note: sudo may be required depending on your workstation set-up<\/p>\n<\/li>\n<li>\n<p>Update the project&#8217;s <code>package.json<\/code> file&#8217;s <code>script<\/code> section to look like this:<\/p>\n<pre><code>...\n&quot;scripts&quot; : {\n&quot;ionic:build&quot;: &quot;ionic-app-scripts build&quot;,\n&quot;ionic:serve&quot;: &quot;ionic-app-scripts serve&quot;\n}\n...\n<\/code><\/pre>\n<p>Note: This is removing several deprecated Ionic scripts. If you have any of your own custom scripts, don&#8217;t remove them.<\/p>\n<\/li>\n<li>\n<p>Install the latest version of <code>@ionic\/app-scripts<\/code><\/p>\n<pre><code>npm install @ionic\/app-scripts@latest --save-dev\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<p>See the changelog <a href=\"https:\/\/github.com\/driftyco\/ionic-app-scripts\/blob\/master\/CHANGELOG.md\">here<\/a>. Please <a href=\"https:\/\/github.com\/driftyco\/ionic-app-scripts\/issues\/new\">let us know<\/a> if any issues arise.<\/p>\n<h3>What\u2019s Next?<\/h3>\n<p>We\u2019re laser-focused on providing the simplest developer experience possible. Easy and fast never goes out of style. We\u2019re continuing to work on speeding up the build process and providing useful feedback in a fast, efficient, and beautiful manner. We\u2019re working on providing the new error details page experience for runtime errors too. We\u2019re also continuing to work with the Angular team to improve the speed and error output for the <code>ngc<\/code> AoT compiler.<\/p>\n<h3>Conclusion<\/h3>\n<p>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 <code>@ionic\/app-scripts<\/code> project. We\u2019re 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!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hello Ionites! Today we\u2019re 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 [&hellip;]<\/p>\n","protected":false},"author":32,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[3,13],"class_list":["post-1501","post","type-post","status-publish","format-standard","hentry","category-all","tag-ionic","tag-ionic-2"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>New: Better Error Reporting for Ionic Apps - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/improvements-to-ionic-build-process\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"New: Better Error Reporting for Ionic Apps\" \/>\n<meta property=\"og:description\" content=\"Hello Ionites! Today we\u2019re 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 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/improvements-to-ionic-build-process\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-11-09T22:05:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-11-21T17:38:47+00:00\" \/>\n<meta name=\"author\" content=\"Dan Bucholtz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@danbucholtz\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dan Bucholtz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/improvements-to-ionic-build-process#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/improvements-to-ionic-build-process\"},\"author\":{\"name\":\"Dan Bucholtz\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/247db98096bf7230497663cd9580359c\"},\"headline\":\"New: Better Error Reporting for Ionic Apps\",\"datePublished\":\"2016-11-09T22:05:57+00:00\",\"dateModified\":\"2016-11-21T17:38:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/improvements-to-ionic-build-process\"},\"wordCount\":551,\"commentCount\":34,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"keywords\":[\"Ionic\",\"Ionic 2\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/improvements-to-ionic-build-process#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/improvements-to-ionic-build-process\",\"url\":\"https:\/\/ionic.io\/blog\/improvements-to-ionic-build-process\",\"name\":\"New: Better Error Reporting for Ionic Apps - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"datePublished\":\"2016-11-09T22:05:57+00:00\",\"dateModified\":\"2016-11-21T17:38:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/improvements-to-ionic-build-process#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/improvements-to-ionic-build-process\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/improvements-to-ionic-build-process#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"New: Better Error Reporting for Ionic Apps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/247db98096bf7230497663cd9580359c\",\"name\":\"Dan Bucholtz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2418cd3c627ca2267ff499530ce9831a41ed4a5530f75d06d6494dbb42d2ee00?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2418cd3c627ca2267ff499530ce9831a41ed4a5530f75d06d6494dbb42d2ee00?s=96&d=mm&r=g\",\"caption\":\"Dan Bucholtz\"},\"description\":\"I'm a software engineer for Ionic\",\"sameAs\":[\"https:\/\/x.com\/danbucholtz\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/danb\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"New: Better Error Reporting for Ionic Apps - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/improvements-to-ionic-build-process","og_locale":"en_US","og_type":"article","og_title":"New: Better Error Reporting for Ionic Apps","og_description":"Hello Ionites! Today we\u2019re 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 [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/improvements-to-ionic-build-process","og_site_name":"Ionic Blog","article_published_time":"2016-11-09T22:05:57+00:00","article_modified_time":"2016-11-21T17:38:47+00:00","author":"Dan Bucholtz","twitter_card":"summary_large_image","twitter_creator":"@danbucholtz","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Dan Bucholtz","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/improvements-to-ionic-build-process#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/improvements-to-ionic-build-process"},"author":{"name":"Dan Bucholtz","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/247db98096bf7230497663cd9580359c"},"headline":"New: Better Error Reporting for Ionic Apps","datePublished":"2016-11-09T22:05:57+00:00","dateModified":"2016-11-21T17:38:47+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/improvements-to-ionic-build-process"},"wordCount":551,"commentCount":34,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"keywords":["Ionic","Ionic 2"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/improvements-to-ionic-build-process#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/improvements-to-ionic-build-process","url":"https:\/\/ionic.io\/blog\/improvements-to-ionic-build-process","name":"New: Better Error Reporting for Ionic Apps - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"datePublished":"2016-11-09T22:05:57+00:00","dateModified":"2016-11-21T17:38:47+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/improvements-to-ionic-build-process#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/improvements-to-ionic-build-process"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/improvements-to-ionic-build-process#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"New: Better Error Reporting for Ionic Apps"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/247db98096bf7230497663cd9580359c","name":"Dan Bucholtz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2418cd3c627ca2267ff499530ce9831a41ed4a5530f75d06d6494dbb42d2ee00?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2418cd3c627ca2267ff499530ce9831a41ed4a5530f75d06d6494dbb42d2ee00?s=96&d=mm&r=g","caption":"Dan Bucholtz"},"description":"I'm a software engineer for Ionic","sameAs":["https:\/\/x.com\/danbucholtz"],"url":"https:\/\/ionic.io\/blog\/author\/danb"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1501","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=1501"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/1501\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=1501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=1501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=1501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}