{"id":2570,"date":"2019-01-28T17:43:25","date_gmt":"2019-01-28T17:43:25","guid":{"rendered":"https:\/\/ionicframework.com\/?p=2570"},"modified":"2019-01-28T19:43:48","modified_gmt":"2019-01-28T19:43:48","slug":"guest-post-ionic-4-0-migration-using-tslint-fixers","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers","title":{"rendered":"Guest Post: Ionic 4.0 Migration Using TSLint Fixers"},"content":{"rendered":"

This post was written by community member, Chris Woolum. Chris is a .NET\/JavaScript developer and, currently, a Chief Architect at Turnoutt, Inc. He\u2019s passionate about software development and leveraging emerging technology. Follow him on Twitter @chriswoolum<\/a>.<\/em><\/p>\n

It was almost a year ago at Ng-Conf<\/a>, when I sat in on a session about TypeScript. One of the speakers that caught my attention was Alex Eagle<\/a>, a software engineer at Google on the angular-core team, who shared an update about Google\u2019s plan to integrate a new version of TypeScript internally before releasing it to the public.<\/p>\n

This was of particular interest to me at the time because I had been working with our architecture team at SpaceX and the adoption of new architecture components had always been a pain point for us. When I discussed this issue with Alex, he explained that his team had been using TSLint fixers (more on those in a bit) to roll out changes to their projects\u2019 code, which got my wheels turning on how I could implement TSLint in my own projects.<\/p>\n

<\/p>\n

During this time, Ionic 4 Beta had just been announced and while the breaking changes list wasn\u2019t much compared to the Ionic 1 to 2 upgrade, it still took a few hours for the migration to complete and left a bit of room for error in what was a fairly small app. It was during this period that I decided to test out using TSLint fixers to perform this migration for me.<\/p>\n

Using the fixers<\/h2>\n

\"\"

I\u2019m happy to say what came out of this endeavor was the creation of the Ionic 4 Migration tool, which you can use similarly to how you would use the normal TSLint rules. Here are the steps:<\/p>\n

    \n
  1. Upgrade your project<\/a> to use the latest Ionic version, which was RC1 at the time of this blog post draft. You should now have a bunch of errors if you try to compile.<\/li>\n
  2. Install the rule-set using npm i -D @ionic\/v4-migration-tslint<\/code> . You will also want to add a file to the root of your project named ionic-migration.json and add the configuration below.<\/li>\n
  3. Run the analyzer to identify all of the changes you will need to make in your code using tslint -c ionic-migration.json -p tsconfig.json<\/code>. Bonus: We implemented a bunch of fixers to automatically correct most of the breaking changes, which you can use by adding the --fix<\/code> flag to the end of the command. (Tip: Be sure your project is backed up or stored in source control just in case anything unexpected occurs.)<\/li>\n<\/ol>\n

    Limitations of the tool<\/h2>\n

    Unfortunately, there were still a few changes that we were unable to automate\u2014A big chunk of which had to do with CSS changes. This is because stylesheets are a bit more flexible, making it hard to identify a common pattern to apply across the migration tool. We also had some cases like the Ion Menu Toggle where the DOM changes were incredibly complex and had to be fixed on a case by case basis.<\/p>\n

    Lastly, during this process, there were some breaking changes where methods returned promises. While the documentation specifies that async\/await should be used to execute this, we found that people were using .then() instead or they would return the promise directly from their method instead of waiting and returning the result. Because the syntax for handling promises can be so varied, we decided to not implement a fixer for these rules, and instead rely on warnings.<\/p>\n

    Overall, we found these limitations to be pretty minor and most of the tedious changes should be covered with this tool. To see what changes are covered by fixers, head to the repo page<\/a> to view all of the rules with each rule containing a link to its section of the Breaking Changes page.<\/p>\n

    How does it work?<\/h2>\n

    \"\"

    This tool is built on top of TSLint which is a static analysis tool that takes advantage of the TypeScript AST(Abstract Syntax Tree) parser. We also used Codelyzer, which is an Angular-specific implementation of these rules and includes some very helpful utilities for parsing Angular-specific components, if needed.<\/p>\n

    Each rule generally has a single target. For example: In the case of ion-button, we had to find places where ion-button existed as an attribute and then replace the element on which it was annotated. We did this by first visiting every element in the DOM tree and looked for any attributes that matched ion-button. If we found a match, we extracted the element\u2019s content and replaced the element with a new ion-button, which had the contents of the previous element.<\/p>\n

    Ready, set, go (upgrade your app)!<\/h2>\n

    I look forward to seeing how others use this tool and hope it will help you or your team\u2019s projects when converting to Ionic 4.0. And, if you\u2019re interested in trying to build out some of the remaining fixers, please check out the repo<\/a> and feel free to submit a PR!<\/p>\n

    I\u2019d like to thank Dan Imhoff and Mike Hartington for their help on this project\u2014Thanks to them, our team was able to get this project over the finish line quickly and easily. Can\u2019t wait to see what you guys build. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"

    This post was written by community member, Chris Woolum. Chris is a .NET\/JavaScript developer and, currently, a Chief Architect at Turnoutt, Inc. He\u2019s passionate about software development and leveraging emerging technology. Follow him on Twitter @chriswoolum. It was almost a year ago at Ng-Conf, when I sat in on a session about TypeScript. One of […]<\/p>\n","protected":false},"author":67,"featured_media":2571,"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,135],"class_list":["post-2570","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-ionic-4","tag-migration","tag-tslint"],"acf":[],"yoast_head":"\nGuest Post: Ionic 4.0 Migration Using TSLint Fixers - 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\/guest-post-ionic-4-0-migration-using-tslint-fixers\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Guest Post: Ionic 4.0 Migration Using TSLint Fixers\" \/>\n<meta property=\"og:description\" content=\"This post was written by community member, Chris Woolum. Chris is a .NET\/JavaScript developer and, currently, a Chief Architect at Turnoutt, Inc. He\u2019s passionate about software development and leveraging emerging technology. Follow him on Twitter @chriswoolum. It was almost a year ago at Ng-Conf, when I sat in on a session about TypeScript. One of […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-28T17:43:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-01-28T19:43:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/01\/tslint.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1440\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Chris Woolum\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Chris Woolum\" \/>\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\/guest-post-ionic-4-0-migration-using-tslint-fixers#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers\"},\"author\":{\"name\":\"Chris Woolum\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/7bd816b50dfb13679615d2a9800c9ca2\"},\"headline\":\"Guest Post: Ionic 4.0 Migration Using TSLint Fixers\",\"datePublished\":\"2019-01-28T17:43:25+00:00\",\"dateModified\":\"2019-01-28T19:43:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers\"},\"wordCount\":868,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/01\/tslint.png\",\"keywords\":[\"Ionic 4\",\"Migration\",\"TSLint\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers\",\"url\":\"https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers\",\"name\":\"Guest Post: Ionic 4.0 Migration Using TSLint Fixers - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/01\/tslint.png\",\"datePublished\":\"2019-01-28T17:43:25+00:00\",\"dateModified\":\"2019-01-28T19:43:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/01\/tslint.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/01\/tslint.png\",\"width\":1440,\"height\":800},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Guest Post: Ionic 4.0 Migration Using TSLint Fixers\"}]},{\"@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\/7bd816b50dfb13679615d2a9800c9ca2\",\"name\":\"Chris Woolum\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/01\/Chris-Woolum-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/01\/Chris-Woolum-150x150.jpg\",\"caption\":\"Chris Woolum\"},\"url\":\"https:\/\/ionic.io\/blog\/author\/chriswoolum\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Guest Post: Ionic 4.0 Migration Using TSLint Fixers - 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\/guest-post-ionic-4-0-migration-using-tslint-fixers","og_locale":"en_US","og_type":"article","og_title":"Guest Post: Ionic 4.0 Migration Using TSLint Fixers","og_description":"This post was written by community member, Chris Woolum. Chris is a .NET\/JavaScript developer and, currently, a Chief Architect at Turnoutt, Inc. He\u2019s passionate about software development and leveraging emerging technology. Follow him on Twitter @chriswoolum. It was almost a year ago at Ng-Conf, when I sat in on a session about TypeScript. One of […]","og_url":"https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers","og_site_name":"Ionic Blog","article_published_time":"2019-01-28T17:43:25+00:00","article_modified_time":"2019-01-28T19:43:48+00:00","og_image":[{"width":1440,"height":800,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/01\/tslint.png","type":"image\/png"}],"author":"Chris Woolum","twitter_card":"summary_large_image","twitter_creator":"@ionicframework","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Chris Woolum","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers"},"author":{"name":"Chris Woolum","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/7bd816b50dfb13679615d2a9800c9ca2"},"headline":"Guest Post: Ionic 4.0 Migration Using TSLint Fixers","datePublished":"2019-01-28T17:43:25+00:00","dateModified":"2019-01-28T19:43:48+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers"},"wordCount":868,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/01\/tslint.png","keywords":["Ionic 4","Migration","TSLint"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers","url":"https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers","name":"Guest Post: Ionic 4.0 Migration Using TSLint Fixers - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/01\/tslint.png","datePublished":"2019-01-28T17:43:25+00:00","dateModified":"2019-01-28T19:43:48+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/01\/tslint.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/01\/tslint.png","width":1440,"height":800},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/guest-post-ionic-4-0-migration-using-tslint-fixers#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Guest Post: Ionic 4.0 Migration Using TSLint Fixers"}]},{"@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\/7bd816b50dfb13679615d2a9800c9ca2","name":"Chris Woolum","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/01\/Chris-Woolum-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/01\/Chris-Woolum-150x150.jpg","caption":"Chris Woolum"},"url":"https:\/\/ionic.io\/blog\/author\/chriswoolum"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2019\/01\/tslint.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2570","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\/67"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=2570"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/2570\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/2571"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=2570"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=2570"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=2570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}