<aside> ⚠️ The guide is written to upgrade from Angular v13. Starting from earlier versions might work, but it’s not guaranteed. Skip the first steps in case you already have Angular v14.

</aside>

<aside> 🎏 Reference: https://update.angular.io/?v=13.0-15.0.

</aside>

Step by step guide

  1. In the front-end’s package.json file remove any @idea-ionic/xxx package. Then, run npm i.

  2. From the front-end folder, run ng update @angular/core@14 @angular/cli@14 which should bring you to version 14 of Angular.

    1. If the operation throws errors on incompatible packages (e.g. @angular-eslint/schematics), remove them temporarily from the package.json You will re-add them after the the update to Angular 15 is completed.
    2. If the operation throws an error on a missing tsconfig.spec.json file, ignore it.

  3. In the angular.json file, remove obsolete properties; they are highlighted in yellow when you open the file.

  4. From the front-end folder, run ng update @angular/core@15 @angular/cli@15 which should bring you to version 15 of Angular.

    1. If the operation throws an error on a missing src/test.ts file, ignore it.

  5. In your codebase, do the following actions, to ensure compatibility to Angular v15:

    1. In v15, the Angular compiler prefixes @keyframes in CSS with the component's scope. This means that any TypeScript code that relies on keyframes names no longer works in v15. Update any such instances to: define keyframes programmatically, use global stylesheets, or change the component's view encapsulation. Read further.
    2. Existing <iframe> instances might have security-sensitive attributes applied to them as an attribute or property binding. These security-sensitive attributes can occur in a template or in a directive's host bindings. Such occurrences require an update to ensure compliance with the new and stricter rules about <iframe> bindings. For more information, see the error page.
    3. Make sure to use decorators in base classes with child classes that inherit constructors and use dependency injection. Such base classes should be decorated with either @Injectable or @Directive or the compiler returns an error. Read further.
    4. Make sure that all ActivatedRouteSnapshot objects have a title property. In v15, the titleproperty is a required property of ActivatedRouteSnapshot. Read further.

  6. In the package.json file:

    1. Manually fix the version of the following dev dependencies so that equals the version of the rest of Angular’s dev packages: @angular-eslint/builder, @angular-eslint/eslint-plugin, @angular-eslint/eslint-plugin-template, @angular-eslint/template-parser. Afterwards, run a npm i.
    2. Remove the dev dependency protractor (obsolete).

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

    1. @ionic/angular.
    2. @ionic/storage-angular.
    3. amazon-cognito-identity-js (if present).
    4. rxjs.
    5. tslib.
    6. zone.js.
    7. … all the @idea-ionic/xxx packages removed in the first steps.
    8. … consider also installing the latest version of the @capacitor-community/… plugins.

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

    1. @ionic/cli.
    2. @capacitor/cli.
    3. @angular-eslint/schematics (previously removed).
    4. eslint.
    5. @typescript-eslint/parser (remove it first).
    6. @typescript-eslint/eslint-plugin (remove it first).
    7. ts-node.
    8. webpack-bundle-analyzer.

  9. Upgrade Capacitor to v4 by running npx cap migrate.

    <aside> ⚠️ If the app is deployed on either iOS or Android, follow Capacitor’s specific update guide for further operations.

    </aside>

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

  11. From the back-end folder, run npm i -D PACKAGE@latest, for each of the following dev packages:

    1. @apidevtools/swagger-parser.
    2. @tsconfig/node16.
    3. @types/aws-lambda.
    4. @types/[email protected].
    5. @typescript-eslint/eslint-plugin (remove it first).
    6. @typescript-eslint/parser (remove it first).
    7. aws-cdk.
    8. aws-cdk-lib.
    9. aws-sdk.
    10. constructs.
    11. esbuild.
    12. eslint.

  12. Install (back-end) the same typescript version (as dev dependency) used in the front-end.

  13. From the back-end folder, remove the package-lock.json file and node_modules folder. Then run npm i : at this point, it shouldn’t throw any errors or vulnerability; it may still show some warnings.

  14. You’re done! Test everything before to commit!!

<aside> ➕ To remove the warnings that appear during the front-end’s compile phase, make sure to update the allowedCommonJsDependencies in the angular.json file to include at least the following values: