Ionic v4 - upgrate to angular 6


#1

Hi,

I recently installed ionic and during project creation it asked whether I wanted to upgrate to v4 or not… I did… However, when I check the package file, I see it has

@ionic/angular”: “4.0.0-beta.13”,

What is the best angular version I should be using? I had assumed that ionic v4 should run angular 6… Should/Can I upgrate it to angular 6?

I’d be graeful for your guidance

Thanks,

Doug


#2

Below is my package file. I’d be grateful if you could help me out with the upgrade

{
“name”: “XXXX”,
“version”: “0.0.1”,
“author”: “Ionic Framework”,
“homepage”: “http://ionicframework.com/”,
“scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”
},
“private”: true,
“dependencies”: {
@angular/animations”: “^6.1.1”,
@angular/common”: “~6.1.1”,
@angular/core”: “~6.1.1”,
@angular/forms”: “~6.1.1”,
@angular/http”: “~6.1.1”,
@angular/platform-browser”: “~6.1.1”,
@angular/platform-browser-dynamic”: “~6.1.1”,
@angular/router”: “~6.1.1”,
@ionic-native/admob-free”: “^5.0.0-beta.21”,
@ionic-native/core”: “5.0.0-beta.21”,
@ionic-native/in-app-purchase-2”: “^5.0.0-beta.21”,
@ionic-native/native-audio”: “^5.0.0-beta.21”,
@ionic-native/native-storage”: “^5.0.0-beta.21”,
@ionic-native/screen-orientation”: “^5.0.0-beta.21”,
@ionic-native/social-sharing”: “^5.0.0-beta.21”,
@ionic-native/splash-screen”: “^5.0.0-beta.21”,
@ionic-native/status-bar”: “5.0.0-beta.21”,
@ionic/angular”: “4.0.0-beta.13”,
“cc.fovea.cordova.purchase”: “7.2.4”,
“cordova-admob-sdk”: “^0.20.2”,
“cordova-ios”: “4.5.5”,
“cordova-plugin-admob-free”: “0.22.0”,
“cordova-plugin-device”: “^2.0.2”,
“cordova-plugin-ionic-keyboard”: “^2.1.3”,
“cordova-plugin-ionic-webview”: “^2.2.0”,
“cordova-plugin-nativeaudio”: “3.0.9”,
“cordova-plugin-nativestorage”: “2.3.2”,
“cordova-plugin-screen-orientation”: “3.0.1”,
“cordova-plugin-splashscreen”: “5.0.2”,
“cordova-plugin-statusbar”: “^2.4.2”,
“cordova-plugin-whitelist”: “^1.3.3”,
“cordova-plugin-x-socialsharing”: “5.4.1”,
“cordova-promise-polyfill”: “0.0.2”,
“core-js”: “^2.5.3”,
“es6-promise-plugin”: “^4.2.2”,
“rxjs”: “6.2.2”,
“zone.js”: “^0.8.26”
},
“devDependencies”: {
@angular-devkit/architect”: “~0.8.5”,
@angular-devkit/build-angular”: “~0.8.5”,
@angular-devkit/core”: “~0.8.5”,
@angular-devkit/schematics”: “~0.8.5”,
@angular/cli”: “~6.2.5”,
@angular/compiler”: “~6.1.1”,
@angular/compiler-cli”: “~6.1.1”,
@angular/language-service”: “~6.1.1”,
@ionic/angular-toolkit”: “^1.0.0”,
@types/jasmine”: “~2.8.6”,
@types/jasminewd2”: “~2.0.3”,
@types/node”: “~10.12.0”,
“codelyzer”: “~4.5.0”,
“jasmine-core”: “~2.99.1”,
“jasmine-spec-reporter”: “~4.2.1”,
“karma”: “~3.0.0”,
“karma-chrome-launcher”: “~2.2.0”,
“karma-coverage-istanbul-reporter”: “~2.0.0”,
“karma-jasmine”: “~1.1.1”,
“karma-jasmine-html-reporter”: “^0.2.2”,
“protractor”: “~5.4.0”,
“ts-node”: “~7.0.0”,
“tslint”: “~5.11.0”,
“typescript”: “~2.9.2”
},
“description”: “An Ionic project”,
“cordova”: {
“plugins”: {
“cordova-plugin-nativeaudio”: {},
“cc.fovea.cordova.purchase”: {},
“cordova-plugin-splashscreen”: {},
“cordova-plugin-admob-free”: {},
“cordova-plugin-screen-orientation”: {},
“cordova-plugin-x-socialsharing”: {},
“cordova-plugin-nativestorage”: {},
“cordova-plugin-whitelist”: {},
“cordova-plugin-statusbar”: {},
“cordova-plugin-device”: {},
“cordova-plugin-ionic-webview”: {},
“cordova-plugin-ionic-keyboard”: {}
},
“platforms”: [
“ios”
]
}
}


#3

With the hope that someone help me out, I wanted to plea one more time…

When I look to the above package, I see angular/core as 6.1.1 but the ionic/angular is 4.0.0-beta-13

Am I using angular 6 then or 4? Do I need to upgrade the ionic/angular to 6.1.1 or to 5.0.0-beta.21 to be inline with other ionic packages?

Each time I make a package change, the project breakes and I ended up creating everything from scratch. I’d be grateful for your help.


#4

I try to summarize briefly what is what following what you wrote above

  • angular/core = the angular framework

  • ionic/angular = the ionic framework, core components and the special part for angular (I guess in the future you may for example also see something like ionic/vue for vue)

  • ionic/native = the wrappers provided by ionic which helps you interface the cordova plugin

so back to the version number

  • angular/core: most actual version is v7 but with ionic for the moment use 6.1.1

  • ionic/angular: v4.0.0-beta-13 or the last one published yesterday v4.0.0-beta-15

  • ionic/native: v5.0.0-beta.21

if you want to be safe and unsure about which version should be use, always follow what provided by ionic. you could always create a dummy project on the side (ionic start something --type=angular) and reflect what will be created in package.json in your own project

I hope this helps a bit and that I was clear enough


#5

I am truly grateful, many thanks for your guidance Reed. Have a great day!


#6

Cool, my pleasure

Also to understand what I meant, maybe this graph from @joshmorony might be clearer. There you see there is ionic core, ionic-angular and angular. So back to your definition, on the diagram you would find:

  • angular/core = angular
  • ionic/angular = ionic core + ionic-angular