Massive updates with version 11 of Angular

Originally published at: https://ionicframework.com/blog/massive-updates-with-version-11-of-angular/

Exciting times all around! Last week the Angular team shipped their latest major release, version 11.0.0 :tada: .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…

3 Likes

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.

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.

2 Likes

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

Does Ionic 5 support Angular 11 ?

Read the blog post :smiley:

yes.