Exciting times all around! Last week the Angular team shipped their latest major release, version 11.0.0 πŸŽ‰ .This update includes some great improvements to the great Angular ecosystem, so let’s go over some what this means for you as an Ionic developer.

Before we dive into things, let’s go over how to update to this new release. For most projects you should just have to run ng update and list the dependencies you’ll want to update:

ng update @angular/core @angular/cli
npm install @ionic/angular-toolkit@latest

This updates the core libraries of Angular as well as the CLI and build tools. This also includes an update to the @ionic/angular-toolkit which has a breaking change, making it a 3.0 release. So If you are not upgrading to version 11 of Angular, please stay on @ionic/angular-toolkit@2.

With that out of the way, let’s dive into things!

ByeByeBacklog

One of the major goals between Angular’s 10.0 release and the 11.0 release was to reduce the overall backlog in the repo. Clearly the team was successful, because the changelog for the 11.0 release is huge! With close to 100 commits that include bug fixes and performance improvements, there’s a lot involved in this major release.

Many of these bug fixes are from older bugs that have been open for some time now. Since the Angular team was heads down getting Ivy out, there hasn’t been a lot of time to address some of these issues. But since Ivy shipped in version 9, the team has been able to refocus their efforts and finally address many outstanding issues.

Better Builds and Serving

When you think of major releases, the first thing you think of is CLI improvements, right? No? Just me? Well I for one welcome the latest improvements to the CLI. In previous releases of Angular, when running the dev server, the CLI would just print the output of the build process with very little formatting (outside of colors). You’re all probably used to seeing something like this:

Well, no more! It’s a small change, but now the Angular CLI will format things into a nice table. Really this is pretty small, but it’s nice and welcomed quality of life improvement:

But a better looking CLI is not all that’s in there. There’s also been significant improvements to the CLI’s build speeds. I recently shared a tweet showing off rebuilds with Angular and the speed is incredible:

Hot Module Replacement (HMR)

And finally, rounding out the CLI improvements, there’s also a brand new Hot Module Replacement (HMR) feature that is truly the icing on cake. HMR is a method of running your devserver where changes are applied without having to do a full rebuild of your app. This exists in other frameworks and now finally, Angular can join the “cool kids club” by providing a great HMR experience too.

Now HMR is great, but there was room for improvements with how it interacts with Ionic. Thankfully, this has already been fixed so we’re just waiting for a new patch release 🀞. BUT, we can at least take a look how HMR (with this patch applied) enhances the overall experience for developers.

To use HMR with developing Ionic apps, run ionic serve -- --hmr.

Migration to ESLint

While not specific to version 11 of Angular, this is a major change in how we lint our projects. Linting is the process of analyzing your code for bugs, warnings, style and consistency changes, and more. In early 2019, TSLint was officially deprecated and the community centered around ESLint as it’s replacement. Since then, there’s been a lot of development in ESLint in order to support TypeScript as well as Angular. Now, we finally have TypeScript-ESLint and Angular-ESLint. This has been a huge community effort and I for one and thrilled to see the community adopt ESLint. While not provided by default with version 11 of Angular, you can opt into Angular-ESLint by running:

ng add @angular-eslint/schematics

It’s worth mentioning that if you make heavy use of projects like Codelyzer or custom TSLint rules, you’ll want to start planning your migration over to ESLint. For more information, check out the Angular-ESLint repo as well as the TypeScript-ESLint repo.

A better path forward

This blog post only covers what I think are some of the biggest updates, but there’s plenty more in the Angular Release Blog. What this release does highlight though is a clearer path forward to a better Angular. The Angular team has committed to providing a roadmap of features they want to work on, and many of these features have required changes to be made between version 9, 10, and now 11. While the timeline for these features are not set in stone, we can say that with these plans, Angular will have a great future. Let’s check back in roughly six months time and see what they work on πŸ’ͺ.

Signup for the Ionic Newsletter to get the latest news and updates!

Notable Replies

  1. Hey there :blush:

    I get this Error when running ng update @angular/core @angular/cli inside my Ionic project:

    Package "@angular-devkit/build-angular" has an incompatible peer dependency to "karma" (requires "~5.1.0", would install "5.2.3")
    Package "@angular/core" has an incompatible peer dependency to "zone.js" (requires "~0.10.3", would install "0.11.3")
    βœ– Migration failed: Incompatible peer dependencies found.
    
  2. Yeah, I saw that come up a few times in testing, though thought it had been resolved.
    You can --force this if you need to then adjust zone and karma afterwards.

  3. Hey,
    I made a massive update and now build in production failed due to error NG8001 for all Ionic components.
    I have already checked IonicModule imports and it seems fine.

    This is my package.json:

      "dependencies": {
        "@angular/common": "^11.0.3",
        "@angular/core": "^11.0.3",
        "@angular/forms": "^11.0.3",
        "@angular/platform-browser": "^11.0.3",
        "@angular/platform-browser-dynamic": "^11.0.3",
        "@angular/router": "^11.0.3",
        "@ionic-native/android-permissions": "^5.30.0",
        "@ionic-native/core": "^5.30.0",
        "@ionic-native/geolocation": "^5.30.0",
        "@ionic-native/google-maps": "^5.5.0",
        "@ionic-native/launch-navigator": "^5.30.0",
        "@ionic-native/location-accuracy": "^5.30.0",
        "@ionic-native/splash-screen": "^5.30.0",
        "@ionic-native/status-bar": "^5.30.0",
        "@ionic/angular": "^5.5.1",
        "cordova-android": "^9.0.0",
        "cordova-androidx-build": "^1.0.4",
        "cordova-browser": "^6.0.0",
        "cordova-ios": "^6.1.1",
        "cordova-plugin-actionsheet": "^2.3.3",
        "cordova-plugin-android-permissions": "^1.1.2",
        "cordova-plugin-device": "^2.0.3",
        "cordova-plugin-dialogs": "^2.0.2",
        "cordova-plugin-geolocation": "^4.1.0",
        "cordova-plugin-googlemaps": "^2.7.1",
        "cordova-plugin-googlemaps-sdk": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git",
        "cordova-plugin-ionic-keyboard": "^2.2.0",
        "cordova-plugin-ionic-webview": "^5.0.0",
        "cordova-plugin-request-location-accuracy": "^2.3.0",
        "cordova-plugin-splashscreen": "^6.0.0",
        "cordova-plugin-statusbar": "^2.4.3",
        "cordova-plugin-whitelist": "^1.3.4",
        "rxjs": "~6.6.3",
        "ts-md5": "^1.2.7",
        "tslib": "^1.14.1",
        "uk.co.workingedge.phonegap.plugin.launchnavigator": "^5.0.5",
        "zone.js": "^0.11.3"
      },
      "devDependencies": {
        "@angular-devkit/build-angular": "^0.1100.3",
        "@angular/cli": "^11.0.3",
        "@angular/compiler": "^11.0.3",
        "@angular/compiler-cli": "^11.0.3",
        "@angular/language-service": "^11.0.3",
        "@ionic/angular-toolkit": "^3.0.0",
        "@ionic/lab": "^3.2.9",
        "@types/jasmine": "^3.6.2",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "^14.14.10",
        "codelyzer": "^5.1.2",
        "jasmine-core": "~3.5.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "^5.1.1",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage-istanbul-reporter": "~2.1.0",
        "karma-jasmine": "~3.0.1",
        "karma-jasmine-html-reporter": "^1.4.2",
        "protractor": "~7.0.0",
        "ts-node": "~8.3.0",
        "tslint": "~6.1.0",
        "typescript": "^4.0.5"
      },
      "description": "An Ionic project",
      "cordova": {
        "plugins": {
          "cordova-plugin-whitelist": {},
          "cordova-plugin-statusbar": {},
          "cordova-plugin-device": {},
          "cordova-plugin-ionic-keyboard": {},
          "cordova-plugin-geolocation": {},
          "cordova-plugin-request-location-accuracy": {
            "PLAY_SERVICES_LOCATION_VERSION": "16.+"
          },
          "cordova-plugin-android-permissions": {},
          "cordova-plugin-googlemaps": {
            "LOCATION_WHEN_IN_USE_DESCRIPTION": "This app wants to get your location while this app runs only.",
            "LOCATION_ALWAYS_USAGE_DESCRIPTION": "This app wants to get your location always, even this app runs in background."
          },
          "uk.co.workingedge.phonegap.plugin.launchnavigator": {
            "GOOGLE_API_KEY_FOR_ANDROID": "",
            "OKHTTP_VERSION": "3.12.0",
            "LOCATION_USAGE_DESCRIPTION": "This app requires access to your location for navigation purposes"
          },
          "cordova-plugin-ionic-webview": {},
          "cordova-plugin-splashscreen": {}
        },
        "platforms": [
          "android",
          "browser",
          "ios"
        ]
      }
    
    

    Have I some wrong dependencies? How can I check this?

    Thanks for the help

  4. Does Ionic 5 support Angular 11 ?