{"id":4039,"date":"2022-01-20T17:17:05","date_gmt":"2022-01-20T17:17:05","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=4039"},"modified":"2022-01-20T17:18:34","modified_gmt":"2022-01-20T17:18:34","slug":"updates-to-ionic-angular-toolkit","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/updates-to-ionic-angular-toolkit","title":{"rendered":"Updates to Ionic Angular Toolkit"},"content":{"rendered":"<p>Since we shipped our 4.0 version of Ionic Angular, Ionic has provided a core package called<code>@ionic\/angular-toolkit<\/code>. This package provides two features for Angular apps:<\/p>\n<ul>\n<li>A collection of schematics for generating new pages\/routes as well as components with Ionic already imported<\/li>\n<li>A collection of builders for Cordova based apps.<\/li>\n<\/ul>\n<p>Now, Angular Toolkit has reached a point where it makes more sense to split the two functionalities into their own respective packages. So, let me introduce to you a new package for Cordova apps that are built with Angular: <code>@ionic\/cordova-builders<\/code>.<\/p>\n<p><!--more--><\/p>\n<h2>What Has Changed?<\/h2>\n<p>For folks using <code>@ionic\/angular<\/code> and Capacitor, you can update to <code>@ionic\/angular-toolkit<\/code> v6 and remove the older <code>ionic-cordova-build<\/code> entries from your <code>angular.json<\/code>.<\/p>\n<p>Install<\/p>\n<pre><code class=\"language-shell\">npm install @ionic\/angular-toolkit@latest\n<\/code><\/pre>\n<p>Remove old builder entries<\/p>\n<pre><code class=\"language-diff\">               &quot;devServerTarget&quot;: &quot;app:serve:ci&quot;\n             }\n           }\n-        },\n-        &quot;ionic-cordova-build&quot;: {\n-          &quot;builder&quot;: &quot;@ionic\/angular-toolkit:cordova-build&quot;,\n-          &quot;options&quot;: {\n-            &quot;browserTarget&quot;: &quot;app:build&quot;\n-          },\n-          &quot;configurations&quot;: {\n-            &quot;production&quot;: {\n-              &quot;browserTarget&quot;: &quot;app:build:production&quot;\n-            }\n-          }\n-        },\n-        &quot;ionic-cordova-serve&quot;: {\n-          &quot;builder&quot;: &quot;@ionic\/angular-toolkit:cordova-serve&quot;,\n-          &quot;options&quot;: {\n-            &quot;cordovaBuildTarget&quot;: &quot;app:ionic-cordova-build&quot;,\n-            &quot;devServerTarget&quot;: &quot;app:serve&quot;\n-          },\n-          &quot;configurations&quot;: {\n-            &quot;production&quot;: {\n-              &quot;cordovaBuildTarget&quot;: &quot;app:ionic-cordova-build:production&quot;,\n-              &quot;devServerTarget&quot;: &quot;app:serve:production&quot;\n-            }\n-          }\n         }\n       }\n     }\n<\/code><\/pre>\n<p>And you&#8217;re good to go! You&#8217;ll still have access to the schematics, so commands like <code>ionic g page<\/code> will work as expected.<\/p>\n<p>For Ionic\/Cordova users, you will need to install the new <code>@ionic\/cordova-builders<\/code> package.<\/p>\n<pre><code class=\"language-shell\">npm install @ionic\/cordova-builders\n<\/code><\/pre>\n<p>Then you can update the existing ionic-cordova-build task to call the new package.<\/p>\n<pre><code class=\"language-diff\">           }\n         },\n         &quot;ionic-cordova-build&quot;: {\n-          &quot;builder&quot;: &quot;@ionic\/angular-toolkit:cordova-build&quot;,\n+          &quot;builder&quot;: &quot;@ionic\/cordova-builders:cordova-build&quot;,\n           &quot;options&quot;: {\n             &quot;browserTarget&quot;: &quot;app:build&quot;\n           },\n@@ -155,7 +155,7 @@\n           }\n         },\n         &quot;ionic-cordova-serve&quot;: {\n-          &quot;builder&quot;: &quot;@ionic\/angular-toolkit:cordova-serve&quot;,\n+          &quot;builder&quot;: &quot;@ionic\/cordova-builders:cordova-serve&quot;,\n           &quot;options&quot;: {\n             &quot;cordovaBuildTarget&quot;: &quot;app:ionic-cordova-build&quot;,\n             &quot;devServerTarget&quot;: &quot;app:serve&quot;\n<\/code><\/pre>\n<p>Everything should still work as expected, but if you do run into any problems, <a href=\"https:\/\/github.com\/ionic-team\/angular-toolkit\/issues\/new\">please open an issue \ud83d\ude04<\/a> and let us know about it.<\/p>\n<h3>What if I use Capacitor but also use Cordova plugins?<\/h3>\n<p>If you are using Capacitor with some Cordova plugins, you <strong>do not need<\/strong> the Cordova builders package.<\/p>\n<h2>Ok, So Why The Change?<\/h2>\n<p>To understand why we made this change, let&#8217;s pull back the curtain and check out what kind of work has gone into <code>@ionic\/angular-toolkit<\/code>. As Angular has progressed through various major releases, their underlying tooling API has included breaking changes that affect the builders portion of Angular Toolkit. With each new major version, there have been updates primarily only to the builders, not the schematics. So, while we <em>could<\/em> keep the package features grouped together, it didn&#8217;t really make sense. This is a quality-of-life change that helps <em>us<\/em> maintain things more efficiently while still providing the same functionality.<\/p>\n<p>And that\u2019s all for now, folks! For Ionic Angular devs, this update also includes support for Angular v13.0 for both packages, which has been highly requested. Be sure to update your dependencies as soon as possible. Cheers \u2615\ufe0f.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Since we shipped our 4.0 version of Ionic Angular, Ionic has provided a core package called@ionic\/angular-toolkit. This package provides two features for Angular apps: A collection of schematics for generating new pages\/routes as well as components with Ionic already imported A collection of builders for Cordova based apps. Now, Angular Toolkit has reached a point [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"0","publish_post_category":"23","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"540795","discourse_permalink":"https:\/\/forum.ionicframework.com\/t\/updates-to-ionic-angular-toolkit\/219586","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,120],"tags":[60,163],"class_list":["post-4039","post","type-post","status-publish","format-standard","hentry","category-all","category-announcements","tag-angular","tag-tooling"],"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>Updates to Ionic Angular Toolkit - Ionic Blog<\/title>\n<meta name=\"description\" content=\"We&#039;re exited to share some updates to help make the Ionic Angular Toolkit package much more flexible for developers.\" \/>\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\/updates-to-ionic-angular-toolkit\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Updates to Ionic Angular Toolkit\" \/>\n<meta property=\"og:description\" content=\"We&#039;re exited to share some updates to help make the Ionic Angular Toolkit package much more flexible for developers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/updates-to-ionic-angular-toolkit\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-20T17:17:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-20T17:18:34+00:00\" \/>\n<meta name=\"author\" content=\"Mike Hartington\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mhartington\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mike Hartington\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/updates-to-ionic-angular-toolkit#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/updates-to-ionic-angular-toolkit\"},\"author\":{\"name\":\"Mike Hartington\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b\"},\"headline\":\"Updates to Ionic Angular Toolkit\",\"datePublished\":\"2022-01-20T17:17:05+00:00\",\"dateModified\":\"2022-01-20T17:18:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/updates-to-ionic-angular-toolkit\"},\"wordCount\":355,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"keywords\":[\"Angular\",\"Tooling\"],\"articleSection\":[\"All\",\"Announcements\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/updates-to-ionic-angular-toolkit#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/updates-to-ionic-angular-toolkit\",\"url\":\"https:\/\/ionic.io\/blog\/updates-to-ionic-angular-toolkit\",\"name\":\"Updates to Ionic Angular Toolkit - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"datePublished\":\"2022-01-20T17:17:05+00:00\",\"dateModified\":\"2022-01-20T17:18:34+00:00\",\"description\":\"We're exited to share some updates to help make the Ionic Angular Toolkit package much more flexible for developers.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/updates-to-ionic-angular-toolkit#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/updates-to-ionic-angular-toolkit\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/updates-to-ionic-angular-toolkit#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Updates to Ionic Angular Toolkit\"}]},{\"@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\/c8c92b04d526adb925ea514c619a267b\",\"name\":\"Mike Hartington\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png\",\"caption\":\"Mike Hartington\"},\"description\":\"Director of Developer Relations\",\"sameAs\":[\"https:\/\/twitter.com\/mhartington\",\"https:\/\/x.com\/mhartington\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/mike\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Updates to Ionic Angular Toolkit - Ionic Blog","description":"We're exited to share some updates to help make the Ionic Angular Toolkit package much more flexible for developers.","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\/updates-to-ionic-angular-toolkit","og_locale":"en_US","og_type":"article","og_title":"Updates to Ionic Angular Toolkit","og_description":"We're exited to share some updates to help make the Ionic Angular Toolkit package much more flexible for developers.","og_url":"https:\/\/ionic.io\/blog\/updates-to-ionic-angular-toolkit","og_site_name":"Ionic Blog","article_published_time":"2022-01-20T17:17:05+00:00","article_modified_time":"2022-01-20T17:18:34+00:00","author":"Mike Hartington","twitter_card":"summary_large_image","twitter_creator":"@mhartington","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Mike Hartington","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/updates-to-ionic-angular-toolkit#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/updates-to-ionic-angular-toolkit"},"author":{"name":"Mike Hartington","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b"},"headline":"Updates to Ionic Angular Toolkit","datePublished":"2022-01-20T17:17:05+00:00","dateModified":"2022-01-20T17:18:34+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/updates-to-ionic-angular-toolkit"},"wordCount":355,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"keywords":["Angular","Tooling"],"articleSection":["All","Announcements"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/updates-to-ionic-angular-toolkit#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/updates-to-ionic-angular-toolkit","url":"https:\/\/ionic.io\/blog\/updates-to-ionic-angular-toolkit","name":"Updates to Ionic Angular Toolkit - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"datePublished":"2022-01-20T17:17:05+00:00","dateModified":"2022-01-20T17:18:34+00:00","description":"We're exited to share some updates to help make the Ionic Angular Toolkit package much more flexible for developers.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/updates-to-ionic-angular-toolkit#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/updates-to-ionic-angular-toolkit"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/updates-to-ionic-angular-toolkit#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Updates to Ionic Angular Toolkit"}]},{"@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\/c8c92b04d526adb925ea514c619a267b","name":"Mike Hartington","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png","caption":"Mike Hartington"},"description":"Director of Developer Relations","sameAs":["https:\/\/twitter.com\/mhartington","https:\/\/x.com\/mhartington"],"url":"https:\/\/ionic.io\/blog\/author\/mike"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4039","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\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=4039"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4039\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=4039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=4039"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=4039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}