<aside> ⚠️ The guide is written to upgrade:

Starting from earlier versions might work, but it’s not guaranteed (it will probably need extra work). Note: there is an older guide to upgrade to Angular v15 from even older versions.

</aside>

<aside> 🎏 References:

Step by step guide

<aside> 🆚 Before to start, make sure your developer tools are updated to the versions stated in our Development basics guide.

</aside>

Front-end

<aside> ✅ Except for guards (see below), there are no major changes to operate in our (typical) codebase while updating Angular from 15 to 16, Ionic from 6 to 7 and Capacitor from 4 to 5.

</aside>

  1. Locate the front-end folder.

  2. In the package.json file remove any @idea-ionic/xxx package. Then, run npm i.

  3. Run ng update --allow-dirty @angular/core@16 @angular/cli@16 which should bring you to version 16 of Angular.

    <aside> 🤖 If the operation throws errors on incompatible packages, remove them temporarily from the package.json You will re-add them after the update to Angular 16 is completed.

    </aside>

  4. Remove the package-lock.json file and the node_modules folder.

  5. In the package.json file, refer to to the following versions for dependencies and devDependencies and manually fix the packages versions so that all of IDEA’s projects are aligned to the very same state. Note: you don’t have to add packages that your codebase don’t need; also: there could be some packages missing from the list.

  6. Substitute the following files’ content:

  7. Run a npm i to reinstall everything from a clean state.

  8. If the app is deployed on either iOS or Android, upgrade Capacitor to v5 by running npx cap migrate; no manual changes should be necessary, but in case of issues refer to the official guide linked at the top of this manual.

    <aside> 💬 In case of weird warnings/errors out of the scope of the official guide, contact @Matteo Carbone.

    </aside>

  9. From the front-end folder, run npm i PACKAGE@latest, for each of the following packages:

    <aside> ⚠️ When updating these libraries, check the release notes from the previous version to make according changes. For IDEA Ionic Extra, also remember to update the i18n dictionaries.

    </aside>

    1. idea-toolbox.
    2. All the @idea-ionic/xxx and other packages removed in the first steps.
    3. Consider also installing the latest version of the @capacitor-community/… plugins.

  10. From the front-end folder, remove again the package-lock.json file and node_modules folder. Then run npm i : at this point, it shouldn’t throw any errors or vulnerability.

  11. Angular deprecated the guards classes (e.g. auth.guard, init.guard), which have now to be rewritten as functions; the change is not complicated: here’s an example from cloud-app-starter.

  12. Adapt the source code to Ionic’s latest changes, by following the official Migration Guide;

Back-end