Ionic 4 & Angular 9

Ionic Framework Ionic Angular
1

Hi all, i’ve a Ionic 4 / Angular 8 app
Can i upgrade to Angular 9 easily ?

Thanks

BB

2

I tried with a new Ionic 4 project and it can say it’s too early to upgrade. I did it like in Angular blog:

ng update @angular/cli@8 @angular/core@8

ng update @angular/cli @angular/core

But got error:

Package "@ionic/angular" has an incompatible peer dependency to "@angular-devkit/core" (requires "7.2.1 - 8", would install "9.0.1").

Then tried to update @ionic/angular to the latest (new project does not use latest).

Again got same error. It means ionic is not ready for Angular 9 exactly.

BUT when i manually updated -almost- all packages to the latest versions, it worked. I build and run on Angular 9. But remember i talk about an empty ionic 4 project with a few additional packages (like Firebase).

My working package.json is below:

  "dependencies": {
    "@angular/common": "~9.0.0",
    "@angular/core": "~9.0.0",
    "@angular/fire": "^5.4.2",
    "@angular/forms": "~9.0.0",
    "@angular/platform-browser": "~9.0.0",
    "@angular/platform-browser-dynamic": "~9.0.0",
    "@angular/router": "~9.0.0",
    "@ionic-native/core": "^5.21.0",
    "@ionic-native/firebase-dynamic-links": "^5.21.0",
    "@ionic-native/splash-screen": "^5.21.0",
    "@ionic-native/status-bar": "^5.21.0",
    "@ionic/angular": "^4.11.10",
    "cordova-ios": "^5.1.1",
    "cordova-plugin-firebase-dynamiclinks": "^4.0.3",
    "core-js": "^2.5.4",
    "firebase": "^7.8.1",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.900.1",
    "@angular-devkit/build-angular": "~0.900.1",
    "@angular-devkit/core": "~9.0.1",
    "@angular-devkit/schematics": "~9.0.1",
    "@angular/cli": "^9.0.1",
    "@angular/compiler": "~9.0.0",
    "@angular/compiler-cli": "~9.0.0",
    "@angular/language-service": "~9.0.0",
    "@ionic/angular-toolkit": "^2.1.2",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.2.1",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.1.3",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.3",
    "ts-node": "~8.6.2",
    "tslint": "~5.15.0",
    "typescript": "~3.7.5"
  },
3

Try with the Ionic framework v5 RC.

4

Maybe it’s better to wait Ionic V5 :slight_smile:

1 Like
5

Ionic 5 is out now, so I’d give that a look.

6

Have you tried to update a v4 project ?

7

Not yet, but here is their migration guide: https://ionicframework.com/docs/building/migration

Also, if you’re using Ionic and Angular, here are the recommended steps for command line package updates:

npm i @ionic/angular@latest --save --save-exact
ng update @angular/cli@8 @angular/core@8
ng update @angular/cli @angular/core

1 Like
8

These commands worked for a new and small Ionic 4 project.

But when i tried to build i got an error:

ERROR in ./src/zone-flags.ts

I needed to add zone-flags.ts to tsconf.app.json like in tsconfig.spec.json:

  "files": [
    "src/main.ts",
    "src/zone-flags.ts",
    "src/polyfills.ts"
  ]

Now everything seems ok. I can build and run my project.

2 Likes
10

Can you elaborate some more here? I’m struggling to think of a set of conditions that would manifest itself this way.

Are you using this for scanning or generating? I ask because I have Ivy-compatible suggestions to replace each side, but they’re different.

12

I guess that wouldn’t affect me, because I am yet to join the Church of Lazy Pages.

14

Only if you use their generators (which I don’t).

16

You can probably guess what I’m going to ask for next. :slight_smile:

17

Well. My Fault. These libraries need to be added in providers array. I tried to import. :slight_smile:

import { Base64ToGallery } from '@ionic-native/base64-to-gallery/ngx';
import { PhotoViewer } from '@ionic-native/photo-viewer/ngx';

I will delete my recent messages so as not to steal readers’ time. Sorry. :frowning:

18 
Hi all, i’ve a Ionic 4 / Angular 8 app
Can i upgrade to Angular 9 easily ?

You have probably sorted this out already but posting so people don’t make the same mistake I did. I just upgraded yesterday my ionic 5, angular 8 project to ionic 5 - Angular 9. After spending hrs trying to update my packages manually only too fail. All that was required was this one liner terminal command within your project:

ng update @angular/core @angular/cli --allow-dirty

Apart from the minor fixes in my code the script did most the work and listed any changes from Angular 8 to Angular 9. I got it from the official ionic video (https://youtu.be/851HkqX3YQ4) which also details the whole process from upgrading from Ionic 4 to Ionic 5.

Overall compared to the previous upgrades from Ionic 2 to 3 to 4, the whole process has been easier and not so cumbersome especially with the semantic versioning. So big shout out to the ionic team, thanks!