January 20, 2022
  • All
  • Announcements
  • Angular
  • Tooling

Updates to Ionic Angular Toolkit

Mike Hartington

Director of Developer Relation...

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 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: @ionic/cordova-builders.

What Has Changed?

For folks using @ionic/angular and Capacitor, you can update to @ionic/angular-toolkit v6 and remove the older ionic-cordova-build entries from your angular.json.

Install

npm install @ionic/angular-toolkit@latest

Remove old builder entries

               "devServerTarget": "app:serve:ci"
             }
           }
-        },
-        "ionic-cordova-build": {
-          "builder": "@ionic/angular-toolkit:cordova-build",
-          "options": {
-            "browserTarget": "app:build"
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "app:build:production"
-            }
-          }
-        },
-        "ionic-cordova-serve": {
-          "builder": "@ionic/angular-toolkit:cordova-serve",
-          "options": {
-            "cordovaBuildTarget": "app:ionic-cordova-build",
-            "devServerTarget": "app:serve"
-          },
-          "configurations": {
-            "production": {
-              "cordovaBuildTarget": "app:ionic-cordova-build:production",
-              "devServerTarget": "app:serve:production"
-            }
-          }
         }
       }
     }

And you’re good to go! You’ll still have access to the schematics, so commands like ionic g page will work as expected.

For Ionic/Cordova users, you will need to install the new @ionic/cordova-builders package.

npm install @ionic/cordova-builders

Then you can update the existing ionic-cordova-build task to call the new package.

           }
         },
         "ionic-cordova-build": {
-          "builder": "@ionic/angular-toolkit:cordova-build",
+          "builder": "@ionic/cordova-builders:cordova-build",
           "options": {
             "browserTarget": "app:build"
           },
@@ -155,7 +155,7 @@
           }
         },
         "ionic-cordova-serve": {
-          "builder": "@ionic/angular-toolkit:cordova-serve",
+          "builder": "@ionic/cordova-builders:cordova-serve",
           "options": {
             "cordovaBuildTarget": "app:ionic-cordova-build",
             "devServerTarget": "app:serve"

Everything should still work as expected, but if you do run into any problems, please open an issue 😄 and let us know about it.

What if I use Capacitor but also use Cordova plugins?

If you are using Capacitor with some Cordova plugins, you do not need the Cordova builders package.

Ok, So Why The Change?

To understand why we made this change, let’s pull back the curtain and check out what kind of work has gone into @ionic/angular-toolkit. 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 could keep the package features grouped together, it didn’t really make sense. This is a quality-of-life change that helps us maintain things more efficiently while still providing the same functionality.

And that’s 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 ☕️.


Mike Hartington

Director of Developer Relation...