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…

4 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.

Any sources on how to update from tslint to eslint in an ionic and angular project?

I followed the instructions on https://github.com/angular-eslint/angular-eslint

I currently have this result when i run ng lint on the command line

Linting "app"...
=============

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <4.1.0

YOUR TYPESCRIPT VERSION: 4.1.3

Please only submit bug reports when using the officially supported version.

=============

C:\Projects\projectname\src\zone-flags.ts
  5:1  error  Unexpected dangling '_' in '__Zone_disable_customElements'  no-underscore-dangle

✖ 1 problem (1 error, 0 warnings)

Lint errors found in the listed files.

Hi,
is it possible to use Angular 11 in an Ionic4 (with cordova) that uses Angular 7 ?
Is there a procedure to update Angular in an Ionic app?

cld

No, you need to update to the latest releases.

Sorry I did not understand, you mean he latest release of Ionic?

Yes, the latest release of @ionic/angular

Hi @mhartington,

Can you please fill stable versions for me for latest ionic:

Angular:
npm:
emcscript:
node:

Reason is, node 14 is giving some error, npm 7 giving error, emcscript giving error after upgrading to latest ionic.