Search code examples
angularionic-frameworkupgrade

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!

Solution

  • 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