CODEWITHSUNDEEP
angularionic-frameworkupgrade
Horace P. Greeley
Horace P. Greeley

Reputation: 952

Ionic 4 with Angular: Any Upgrade Guidelines available?

I would like to upgrade my Ionic Framework based Angular App to Angular 8.x.

  1. Is there an official guideline for upgrading Ionic Apps?
  2. Does the ionic CLI support developers during the upgrade process (like angular cli)?
  3. Does the ionic framwork support ng update?

Current Version:

The output below was generated by ionic info (executed in the project folder):

Ionic:

   Ionic CLI                     : 5.4.1 (C:\ProgramData\nvm\v10.15.0\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.9.0
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.3.8
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : android 8.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 8 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.8

System:

   NodeJS : v10.15.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

Thanks for your help!

Upvotes: 2

Views: 822

Answers (1)

maxfloden
maxfloden

Reputation: 325

This is the semi-official guide (posted by Mike Hartington from the Ionic team) to upgrading Ionic 4 to Angular 8: https://docs.google.com/document/d/1QOpQeDifPSg6F9WycDLcbQnpqjN96ew-Ap0_CB7CcCQ

I just tried it and it works like a charm.

Updating Ionic to Angular 8

Update @ionic/angular and @ionic/angular-toolkit to the latest release

npm install @ionic/[email protected]
npm install @ionic/[email protected] -D

From here we can run the following commands

npx ng update @angular/core @angular/cli

Now most packages should be updated, just to be sure, we also need to update these

Install the latest angular devkit updates with 

npm i @angular-devkit/architect@latest @angular-devkit/build-angular@latest @angular-devkit/core@latest @angular-devkit/schematics@latest

Or if you’re on a mac/linux

npm i @angular-devkit/{architect,build-angular,core,schematics}@latest

Potential Issues
There is a known bug in an older version of the Angular CLI that will cause the update commands to stop running and exit. If you encounter this, please look over this issue and use the commands below.

https://github.com/angular/angular-cli/issues/14589

npx ng update @angular/core
npx ng update --allow-dirty @angular/core --from 7 --to --migrate-only

ng update @angular/cli --allow-dirty
ng update @angular/cli --allow-dirty --from 7 --to 8 --migrate-only

There is a known bug where the Angular CLI will attempt to install Angular 8.2.0-next. If you encounter this, please look over this issue and use the commands below:

https://github.com/angular/angular-cli/issues/14980

npm install @angular/cli@latest
npx ng update @angular/core

Notice that this has you updating the Angular CLI first, then updating Angular Core. From here, you can continue on with the remaining commands in the guide above.

If you encounter any problems, please open a new issue on the Ionic repo with detailed steps to reproduce: https://github.com/ionic-team/ionic/issues

Upvotes: 2

Related Questions