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 .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…
Hey there
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.
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
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.
Should I update @ionic/angular-toolkit from version 2.0.0 to 3+ after upgrading to angular 11?
Yes, I would suggest doing that.
Hi mhartington,
I had ionic5 and angular 8 before. below livereload command was working fine.
ionic cordova emulate android --livereload
I upgrade angular11. and then the livereload has an error. could you please help me to use livereload?
error messages are below…
[ng] /home/hyunsook/repos/base/node_modules/typescript/lib/typescript.js:14963
[ng] return node.moduleReference.kind === 269 /* ExternalModuleReference */ ? node.moduleReference.expression : undefined;
[ng] ^
[ng] TypeError: Cannot read property ‘kind’ of undefined
[ng] at Object.getExternalModuleName (/home/hyunsook/repos/base/node_modules/typescript/lib/typescript.js:14963:45)
[ng] at collectModuleReferences (/home/hyunsook/repos/base/node_modules/typescript/lib/typescript.js:104149:45)
[ng] at collectExternalModuleReferences (/home/hyunsook/repos/base/node_modules/typescript/lib/typescript.js:104138:17)
[ng] at processImportedModules (/home/hyunsook/repos/base/node_modules/typescript/lib/typescript.js:104704:13)
[ng] at findSourceFile (/home/hyunsook/repos/base/node_modules/typescript/lib/typescript.js:104451:17)
[ng] at /home/hyunsook/repos/base/node_modules/typescript/lib/typescript.js:104280:85
[ng] at getSourceFileFromReferenceWorker (/home/hyunsook/repos/base/node_modules/typescript/lib/typescript.js:104247:34)
[ng] at processSourceFile (/home/hyunsook/repos/base/node_modules/typescript/lib/typescript.js:104280:13)
[ng] at processRootFile (/home/hyunsook/repos/base/node_modules/typescript/lib/typescript.js:104103:13)
[ng] at /home/hyunsook/repos/base/node_modules/typescript/lib/typescript.js:104678:21
[ng] at Object.forEach (/home/hyunsook/repos/base/node_modules/typescript/lib/typescript.js:382:30)
[ng] at processLibReferenceDirectives (/home/hyunsook/repos/base/node_modules/typescript/lib/typescript.js:104673:16)
[ng] at findSourceFile (/home/hyunsook/repos/base/node_modules/typescript/lib/typescript.js:104448:21)
[ng] at /home/hyunsook/repos/base/node_modules/typescript/lib/typescript.js:104280:85
[ng] at getSourceFileFromReferenceWorker (/home/hyunsook/repos/base/node_modules/typescript/lib/typescript.js:104247:34)
[ng] at processSourceFile (/home/hyunsook/repos/base/node_modules/typescript/lib/typescript.js:104280:13)
Update your version of ionic/angular-toolkit
Thank you fro reply.
Which version should be?
{
“private”: true,
“scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”,
“reset_repo”: “node scripts/reset-plgn-pltf-nm.js && npm ci && ionic cordova prepare”,
“reset_serve”: "npm run reset_repo && ionic serve ",
“reset_run”: “npm run reset_repo && ionic cordova run”
},
“cypress-cucumber-preprocessor”: {
“nonGlobalStepDefinitions”: true
},
“config”: {
“ionic_webpack”: “./src/config/webpack.config.js”,
“ionic_uglifyjs”: “./src/config/uglifyjs.config.js”,
“ionic_dependency_tree”: “./src/config/webpack.config.js”
},
“dependencies”: {
“@angular-devkit/build-angular”: “^0.1102.17”,
“@angular/animations”: “^11.2.14”,
“@angular/common”: “^11.2.14”,
“@angular/core”: “^11.2.14”,
“@angular/forms”: “^11.2.14”,
“@angular/platform-browser”: “^11.2.14”,
“@angular/platform-browser-dynamic”: “^11.2.14”,
“@angular/router”: “^11.2.14”,
“@angular/upgrade”: “^11.2.14”,
“@capacitor/android”: “4.0.1”,
“@capacitor/app”: “4.0.1”,
“@capacitor/core”: “4.0.1”,
“@capacitor/haptics”: “4.0.1”,
“@capacitor/keyboard”: “4.0.1”,
“@capacitor/status-bar”: “4.0.1”,
“@ionic-native/action-sheet”: “^5.36.0”,
“@ionic-native/app-availability”: “^5.36.0”,
“@ionic-native/app-version”: “^5.36.0”,
“@ionic-native/badge”: “^5.36.0”,
“@ionic-native/barcode-scanner”: “^5.36.0”,
“@ionic-native/base64”: “^5.36.0”,
“@ionic-native/camera”: “^5.36.0”,
“@ionic-native/clipboard”: “^5.36.0”,
“@ionic-native/core”: “^5.36.0”,
“@ionic-native/device”: “^5.36.0”,
“@ionic-native/diagnostic”: “^5.36.0”,
“@ionic-native/fcm”: “^5.36.0”,
“@ionic-native/file”: “^5.36.0”,
“@ionic-native/file-opener”: “^5.36.0”,
“@ionic-native/file-transfer”: “^5.36.0”,
“@ionic-native/geolocation”: “^5.36.0”,
“@ionic-native/image-picker”: “^5.36.0”,
“@ionic-native/in-app-browser”: “^5.36.0”,
“@ionic-native/ionic-webview”: “^5.36.0”,
“@ionic-native/keyboard”: “^5.36.0”,
“@ionic-native/local-notifications”: “^5.36.0”,
“@ionic-native/market”: “^5.36.0”,
“@ionic-native/network”: “^5.36.0”,
“@ionic-native/open-native-settings”: “^5.36.0”,
“@ionic-native/photo-viewer”: “^5.31.1”,
“@ionic-native/splash-screen”: “^5.36.0”,
“@ionic-native/sqlite”: “^5.36.0”,
“@ionic-native/status-bar”: “^5.36.0”,
“@ionic-native/toast”: “^5.36.0”,
“@ionic/angular”: “^5.9.3”,
“@ionic/angular-toolkit”: “^5.0.3”,
“@ionic/storage”: “^2.2.0”,
“@logisticinfotech/ionic4-datepicker”: “^1.4.4”,
“@ngx-translate/core”: “^13.0.0”,
“@ngx-translate/http-loader”: “^6.0.0”,
“@tinymce/tinymce-angular”: “^4.2.1”,
“angular2-signaturepad”: “^2.9.0”,
“angular2-uuid”: “^1.1.1”,
“br-mask”: “0.0.8”,
“chart.js”: “^2.8.0”,
“cocoapods”: “0.0.0”,
“com-badrit-base64”: “^0.2.0”,
“cordova-android”: “^9.0.0”,
“cordova-clipboard”: “^1.3.0”,
“cordova-ios”: “^5.0.1”,
“cordova-open-native-settings”: “^1.5.2”,
“cordova-plugin-actionsheet”: “^2.3.3”,
“cordova-plugin-app-version”: “^0.1.9”,
“cordova-plugin-appavailability”: “^0.4.2”,
“cordova-plugin-badge”: “^0.8.8”,
“cordova-plugin-cocoapod-support”: “1.6.2”,
“cordova-plugin-file”: “^6.0.2”,
“cordova-plugin-file-opener2”: “^2.2.1”,
“cordova-plugin-file-transfer”: “^1.7.1”,
“cordova-plugin-inappbrowser”: “^3.1.0”,
“cordova-plugin-local-notification”: “^0.9.0-beta.2”,
“cordova-plugin-market”: “^1.2.0”,
“cordova-plugin-network-information”: “^2.0.2”,
“cordova-plugin-x-toast”: “^2.7.2”,
“cordova.plugins.diagnostic”: “^5.0.0”,
“core-js”: “^2.5.4”,
“cypress-localstorage-commands”: “^1.2.4”,
“cypress-wait-until”: “^1.7.1”,
“dotenv”: “^8.2.0”,
“hammerjs”: “^2.0.8”,
“less”: “^3.9.0”,
“moment”: “^2.24.0”,
“ng2-charts”: “^2.4.3”,
“ngx-pipes”: “^2.5.6”,
“node-sass”: “^4.14.1”,
“phonegap-plugin-barcodescanner”: “^8.1.0”,
“po2json”: “^0.4.5”,
“raygun4js”: “^2.25.1”,
“rxjs”: “~6.5.1”,
“save”: “^2.4.0”,
“sprintf-js”: “^1.1.2”,
“tinymce”: “^5.2.1”,
“tslib”: “^2.0.0”,
“zone.js”: “~0.10.2”
},
“devDependencies”: {
“@angular-devkit/architect”: “^0.1202.2”,
“@angular-devkit/core”: “^12.2.2”,
“@angular-devkit/schematics”: “^12.2.2”,
“@angular/cli”: “^11.2.17”,
“@angular/compiler”: “^11.2.14”,
“@angular/compiler-cli”: “~11.2.14”,
“@angular/language-service”: “~11.2.14”,
“@biesbjerg/ngx-translate-extract”: “^2.3.1”,
“@capacitor/cli”: “4.0.1”,
“@ionic/app-scripts”: “^3.2.4”,
“@types/jasmine”: “~3.6.0”,
“@types/jasminewd2”: “~2.0.3”,
“@types/node”: “^12.11.1”,
“@types/raygun4js”: “^2.13.1”,
“codelyzer”: “^6.0.0”,
“com-sarriaroman-photoviewer”: “^1.2.5”,
“cordova-clipboard”: “^1.3.0”,
“cordova-plugin-androidx”: “^2.0.0”,
“cordova-plugin-androidx-adapter”: “^1.1.1”,
“cordova-plugin-app-launcher”: “git+https://github.com/nchutchind/cordova-plugin-app-launcher.git”,
“cordova-plugin-camera”: “git+https://github.com/jaganreddy314/cordova-plugin-camera.git”,
“cordova-plugin-device”: “^2.0.2”,
“cordova-plugin-fcm-with-dependecy-updated”: “^7.0.9”,
“cordova-plugin-geolocation”: “git+https://github.com/simPRO-Software/cordova-plugin-geolocation.git#4.0.2-simpro”,
“cordova-plugin-ionic-keyboard”: “^2.1.3”,
“cordova-plugin-ionic-webview”: “^4.1.1”,
“cordova-plugin-splashscreen”: “^5.0.2”,
“cordova-plugin-square-pos-android”: “git+https://github.com/simPRO-Software/cordova-plugin-square-pos-android.git”,
“cordova-plugin-square-pos-ios”: “git+https://github.com/simPRO-Software/cordova-plugin-square-pos-ios.git”,
“cordova-plugin-statusbar”: “^2.4.2”,
“cordova-plugin-telerik-imagepicker”: “git+https://github.com/Telerik-Verified-Plugins/ImagePicker.git#2.3.4”,
“cordova-plugin-whitelist”: “^1.3.3”,
“cordova-sqlite-storage”: “^6.0.0”,
“cypress”: “^6.5.0”,
“cypress-cucumber-preprocessor”: “^4.0.1”,
“cypress-file-upload”: “^5.0.2”,
“jasmine-core”: “~3.6.0”,
“jasmine-spec-reporter”: “~5.0.0”,
“karma”: “~6.3.9”,
“karma-chrome-launcher”: “~3.1.0”,
“karma-coverage-istanbul-reporter”: “~3.0.2”,
“karma-jasmine”: “~4.0.0”,
“karma-jasmine-html-reporter”: “^1.5.0”,
“protractor”: “~7.0.0”,
“ts-node”: “~8.3.0”,
“tslint”: “~6.1.0”,
“typescript”: “4.0.8”,
“uglifyjs-webpack-plugin”: “^2.1.3”
},
“description”: “simPRO Mobile suite of apps”,
“cordova”: {
“plugins”: {
“cordova-plugin-whitelist”: {},
“cordova-plugin-statusbar”: {},
“cordova-plugin-device”: {},
“cordova-plugin-splashscreen”: {},
“cordova-plugin-ionic-webview”: {
“ANDROID_SUPPORT_ANNOTATIONS_VERSION”: “27.+”
},
“cordova-plugin-ionic-keyboard”: {},
“cordova-plugin-inappbrowser”: {},
“com-badrit-base64”: {},
“cordova.plugins.diagnostic”: {
“ANDROID_SUPPORT_VERSION”: “28.+”
},
“cordova-plugin-geolocation”: {},
“cordova-open-native-settings”: {},
“cordova-plugin-file-opener2”: {
“ANDROID_SUPPORT_V4_VERSION”: “27.+”
},
“cordova-plugin-appavailability”: {},
“cordova-plugin-app-version”: {},
“cordova-plugin-network-information”: {},
“cordova-plugin-file”: {},
“cordova-plugin-actionsheet”: {},
“cordova-plugin-x-toast”: {},
“cordova-plugin-app-launcher”: {},
“cordova-plugin-market”: {},
“cordova-plugin-square-pos-ios”: {},
“cordova-plugin-square-pos-android”: {},
“phonegap-plugin-barcodescanner”: {
“ANDROID_SUPPORT_V4_VERSION”: “27.+”
},
“cordova-plugin-cocoapod-support”: {},
“cordova-plugin-androidx”: {},
“cordova-plugin-androidx-adapter”: {},
“cordova-plugin-local-notification”: {},
“cordova-clipboard”: {},
“cordova-plugin-file-transfer”: {},
“com-sarriaroman-photoviewer”: {},
“cordova-sqlite-storage”: {},
“cordova-plugin-camera”: {
“ANDROID_SUPPORT_V4_VERSION”: “27.+”
},
“cordova-plugin-telerik-imagepicker”: {
“PHOTO_LIBRARY_USAGE_DESCRIPTION”: " "
},
“cordova-plugin-fcm-with-dependecy-updated”: {
“ANDROID_FCM_VERSION”: “19.0.0”,
“ANDROID_GRADLE_TOOLS_VERSION”: “3.5.3”,
“ANDROID_GOOGLE_SERVICES_VERSION”: “4.3.3”,
“ANDROID_DEFAULT_NOTIFICATION_ICON”: “@mipmap/ic_launcher”
}
},
“platforms”: [
“ios”,
“android”
]
}
}
Thank you fro reply.
Which version should be?
“@ionic/angular”: “^5.9.3”,
“@ionic/angular-toolkit”: “^5.0.3”,
Currently, above.
Thank you.