{"id":2578,"date":"2019-01-30T16:09:50","date_gmt":"2019-01-30T16:09:50","guid":{"rendered":"https:\/\/ionicframework.com\/?p=2578"},"modified":"2023-07-18T11:54:33","modified_gmt":"2023-07-18T15:54:33","slug":"a-guide-for-migrating-to-ionic-4-0","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0","title":{"rendered":"A Guide for Migrating to Ionic 4.0"},"content":{"rendered":"

By now, you likely have heard the news that Ionic 4.0 is here! If you\u2019re currently maintaining an older Ionic app though, you might have concerns about the challenges of upgrading to the latest version. While there will be some work involved to migrate over, there\u2019s never been a better time to do so. Take a look below for some of the benefits of upgrading to Ionic 4.0, plus links to our migration guides to ease the process.<\/p>\n

<\/p>\n

Future-Proof Apps<\/h2>\n

The Ionic Framework has been rewritten from the ground up for the last time: Now, all UI controls are web components, built on open web standards. As a result, Ionic components are no longer tightly coupled to Angular, which opens up compatibility for current favorites like React and Vue, or any JavaScript framework that becomes popular in the future. This also means that future versions of Ionic after 4.0 will be much easier to update given the underlying technology will remain the same.<\/p>\n

Another exciting change is that Ionic is embracing framework-specific tooling. Ionic 3 has custom command line and build tooling, as well as custom router implementations, which has often led to some churn and confusion. However, now that Ionic embraces the tooling and architecture of each specific framework, it\u2019s become much simpler to integrate our technology. Using Angular? Use the Angular CLI. Using Vue? Use the Vue CLI, etc. It\u2019s the best of both worlds. So, as your framework of choice evolves, you get the latest and greatest tooling, leaving more time to focus on what matters\u2014adding more value to your app.<\/p>\n

Angular is Still a First-Class Citizen<\/h2>\n

Angular fans, have no fear! Just because Ionic 4.0 broadens our framework reach, doesn\u2019t mean we are leaving it behind. In fact, Angular will continue to be a major focus for us in 2019 and beyond. The best part is that you\u2019ll be able to reuse the majority of your Angular-specific code when updating to Ionic 4.0. Your services, for example, should port over without modification (assuming they aren\u2019t depending on any Ionic-specific functionality). Ionic 4.0 supports Angular 7+ today and will closely follow future major Angular versions.<\/p>\n

Truly Cross-Platform<\/h2>\n

Write and maintain one codebase that will run on any device or operating system across mobile and desktop. This includes native iOS and Android apps, as well as Progressive Web Apps, and even Electron-based native desktop apps. Ionic apps don\u2019t just run on any platform, they are specifically designed to look and feel native to the platform that they run on. The benefit of this approach is that it drastically cuts down on the time and cost to create multi-experience apps that run on iOS, Android, desktop, and more.<\/p>\n

Migrating from Ionic 1.0 to Ionic 4.0<\/h2>\n

This migration involves moving from AngularJS (aka Angular 1) to Angular 7+. There are many architectural differences between these versions so some of the app code will have to be rewritten. The amount of work involved depends on the complexity and size of your app. The upside is that for the most part, the Ionic UI components you know and love from Ionic 1 haven\u2019t changed much.<\/p>\n

In terms of a strategy for beginning the migration, identify a time frame (perhaps one or two sprints) to get started. We recommend feature-freezing the Ionic 1 application and getting the code in order: Fix any major bugs, eliminate tech debt, and reorganize as you see fit. Then, identify which features to migrate over and which to abandon. Then, create a new Ionic 4 application and begin porting features over. Once the team is comfortable that the new app is stable, you can shut down the Ionic 1 app.<\/p>\n

Migrating from Ionic 3.0 to 4.0<\/h2>\n

Migration off of an Ionic 3 app will require less work than an Ionic 1 app, but you’ll need time to successfully complete the transition. Begin by reviewing Angular’s release guide<\/a> to gain an understanding of the changes from Angular 2+ to Angular 7+. Next, generate a new Ionic 4 project and start by copying over various parts of your Angular code such as services, providers, pipes, and components. Work on one feature at a time, from top to bottom, testing as you go.<\/p>\n

Two areas that received the most changes are navigation and lazy loading. Instead of using Ionic’s own NavController<\/code>, we integrate now integrate with the official Angular Router. By embracing the official tooling<\/a> of each framework, a more consistent and dependable routing experience is achieved. Since navigation has changed, the mechanism for lazy loading has also changed in Ionic 4. Now, this is accomplished using the loadChildren <\/code>method of the Angular router.<\/p>\n

So, what are you waiting for? Check out the full migration guides<\/a> and begin migrating to Ionic 4.0 today.<\/p>\n

If your team would like assistance with the migration, please reach out to us<\/a> for more information! Ionic offers Advisory Services, which includes Ionic 4.0 training, architecture reviews, and migration assistance.<\/p>\n","protected":false},"excerpt":{"rendered":"

By now, you likely have heard the news that Ionic 4.0 is here! If you\u2019re currently maintaining an older Ionic app though, you might have concerns about the challenges of upgrading to the latest version. While there will be some work involved to migrate over, there\u2019s never been a better time to do so. Take […]<\/p>\n","protected":false},"author":62,"featured_media":2579,"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":[124],"tags":[107,134],"class_list":["post-2578","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-ionic-4","tag-migration"],"acf":[],"yoast_head":"\nA Guide for Migrating to Ionic 4.0 - Ionic Blog<\/title>\n<meta name=\"description\" content=\"Take a look below for some of the benefits of upgrading to Ionic 4.0, plus links to our migration guides to ease the process.\" \/>\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\/a-guide-for-migrating-to-ionic-4-0\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Guide for Migrating to Ionic 4.0\" \/>\n<meta property=\"og:description\" content=\"Take a look below for some of the benefits of upgrading to Ionic 4.0, plus links to our migration guides to ease the process.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-30T16:09:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-18T15:54:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/01\/v4-migration-img.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1440\" \/>\n\t<meta property=\"og:image:height\" content=\"640\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Matt Netkow\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dotNetkow\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Matt Netkow\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0\"},\"author\":{\"name\":\"Matt Netkow\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/93c8b2fe110f183510c6285b0de40790\"},\"headline\":\"A Guide for Migrating to Ionic 4.0\",\"datePublished\":\"2019-01-30T16:09:50+00:00\",\"dateModified\":\"2023-07-18T15:54:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0\"},\"wordCount\":813,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/01\/v4-migration-img.png\",\"keywords\":[\"Ionic 4\",\"Migration\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0\",\"url\":\"https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0\",\"name\":\"A Guide for Migrating to Ionic 4.0 - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/01\/v4-migration-img.png\",\"datePublished\":\"2019-01-30T16:09:50+00:00\",\"dateModified\":\"2023-07-18T15:54:33+00:00\",\"description\":\"Take a look below for some of the benefits of upgrading to Ionic 4.0, plus links to our migration guides to ease the process.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/01\/v4-migration-img.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/01\/v4-migration-img.png\",\"width\":1440,\"height\":640},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A Guide for Migrating to Ionic 4.0\"}]},{\"@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\/93c8b2fe110f183510c6285b0de40790\",\"name\":\"Matt Netkow\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mattnetkow-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mattnetkow-150x150.jpg\",\"caption\":\"Matt Netkow\"},\"sameAs\":[\"https:\/\/x.com\/dotNetkow\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/mattnetkow\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A Guide for Migrating to Ionic 4.0 - Ionic Blog","description":"Take a look below for some of the benefits of upgrading to Ionic 4.0, plus links to our migration guides to ease the process.","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\/a-guide-for-migrating-to-ionic-4-0","og_locale":"en_US","og_type":"article","og_title":"A Guide for Migrating to Ionic 4.0","og_description":"Take a look below for some of the benefits of upgrading to Ionic 4.0, plus links to our migration guides to ease the process.","og_url":"https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0","og_site_name":"Ionic Blog","article_published_time":"2019-01-30T16:09:50+00:00","article_modified_time":"2023-07-18T15:54:33+00:00","og_image":[{"width":1440,"height":640,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/01\/v4-migration-img.png","type":"image\/png"}],"author":"Matt Netkow","twitter_card":"summary_large_image","twitter_creator":"@dotNetkow","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Matt Netkow","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0"},"author":{"name":"Matt Netkow","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/93c8b2fe110f183510c6285b0de40790"},"headline":"A Guide for Migrating to Ionic 4.0","datePublished":"2019-01-30T16:09:50+00:00","dateModified":"2023-07-18T15:54:33+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0"},"wordCount":813,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/01\/v4-migration-img.png","keywords":["Ionic 4","Migration"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0","url":"https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0","name":"A Guide for Migrating to Ionic 4.0 - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/01\/v4-migration-img.png","datePublished":"2019-01-30T16:09:50+00:00","dateModified":"2023-07-18T15:54:33+00:00","description":"Take a look below for some of the benefits of upgrading to Ionic 4.0, plus links to our migration guides to ease the process.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/01\/v4-migration-img.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/01\/v4-migration-img.png","width":1440,"height":640},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/a-guide-for-migrating-to-ionic-4-0#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"A Guide for Migrating to Ionic 4.0"}]},{"@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\/93c8b2fe110f183510c6285b0de40790","name":"Matt Netkow","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mattnetkow-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/07\/mattnetkow-150x150.jpg","caption":"Matt Netkow"},"sameAs":["https:\/\/x.com\/dotNetkow"],"url":"https:\/\/ionic.io\/blog\/author\/mattnetkow"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/01\/v4-migration-img.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2578","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\/62"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=2578"}],"version-history":[{"count":1,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2578\/revisions"}],"predecessor-version":[{"id":5493,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2578\/revisions\/5493"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/2579"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=2578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=2578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=2578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}