There is a great tutorial video on the official Ionic YouTube channel which will show you a best-case scenario for upgrading to Ionic 5 and Angular 9.
However for my simple prototype app that I had made last year (just a demo that let me reorder a list) I tried to update but almost immediately came off the rails.
It turned out to be using "@angular/core": "^7.2.2" which broke the app from ionic serve because it was expecting Angular 8.
Then I tried to run the ng upgrade but got hit with incompatible peer dependencies for codelyzer, @ionic/angular-toolkit, and @angular/http.
So I tried to upgrade to Angular 8 first with npm i @angular/core@"~8.x.x" but that failed as it needed npm i zone.js@~0.9.1.
How can I update successfully to the latest and greatest?
So for people coming from angular 7 it seems for this project the correct upgrade commands are:
npm i @ionic/angular@latest
npm i zone.js@~0.9.1
npm i @angular/core@"~8.x.x"
npm i @ionic/angular-toolkit@latest
npm i codelyzer@latest
npm remove @angular/http
ng update @angular/core @angular/cli --allow-dirty
and it finally updated everything. However I did see a warning saying Package not installed: "--allow-dirty". Skipping.
However, then after that I dared to try ionic build and it failed with this error, which got me stuck for another 15 minutes:
zone-flags.ts is missing from the TypeScript compilation.
It seems that the polyfills.ts uses the .ts extension in the include which is breaking the compilation.
I changed this line in polyfills.ts:
import './zone-flags.ts';
To this:
import './zone-flags';
AND IT COMPILED.
But did it ionic serve?
No. No it did not.
The browser showed this in the console:
Error: Angular JIT compilation failed: '@angular/compiler' not loaded!
So after some more searching, I found that if you open main.ts and then add
import '@angular/compiler';
Near the top then all will be right and good with the world once more...
...unless your project then needs the markup breaking changes resolving, but you're on your own for that.