Upgrading to Angular 18

[lukestanley]

Package upgrading and testing on Vercel with Flows from Pilots
Starting with trying to upgrade the angular-16-picked branch.

[gsambrotta]

Documenting my process:

• Follow the steps from https://angular.dev/update-guide?v=16.0-18.0&l=3. Encountering tons of packages dependencies errors. Impossible to move on.
• Research how to upgrade from Angular 16 to 17 (Angular must be upgraded one version at the time)
• The sources mostly helped me to understand how to move on: https://dev.to/nikosanif/angular-authentication-upgrade-to-angular-18-382h https://ihsanulpro.medium.com/upgrade-to-angular-15-angular-14-to-angular-15-application-migration-cb74cfcba129
• Using ng update and npx npm-check-updates -u to check packages that needs to be updated and their latest version.

Command history to upgrade so far:

• ng update @angular/core@17 @angular/cli@17 --force
• commit package updates
• ng version // to check version is bump
• ng update // to check what is still to be updated
• npm i @angular-eslint/schematics@17 --force
• npm i @angular-eslint/builder@17 @angular-eslint/eslint-plugin@17 @angular-eslint/eslint-plugin-template@17 @angular-eslint/template-parser@17 --force
• commit
• Using npm-check-updates to check packages update. With ncu --interactive --format group to interactively upgrade packages
• Upgrade just Patch
• Start to upgrade major version in the hope to solve the dependencies issue
• npm i @angular/pwa@17 --force
• commit
• ng update @angular/material@17
• ng update @asymmetrik/ngx-leaflet@17, @asymmetrik/ngx-leaflet-markercluster@17
• commit
• ng update @ngtools/webpack@17 --force (typescript incompatibility error)
• ng update @ngrx/store@17
• ng update + commit
• Try to npm i and getting Typescrypt incompatibility error
• Delete package-lock.json
• Change typescript version to 5.3.0 in Package.json
• run npm i - get ng-select incompatibility error (means typescript error is gone!)
• ng update @ng-select/ng-select
• ng update ngx-monaco-editor-v2
• run npm i --> no error!
• run: npm run serve:dev --> Error with Material UI and Formly to be fixed.

Keep going, checking the list here: https://angular.dev/update-guide?v=16.0-18.0&l=3

Fix Angular Material UI theme error from here:
https://stackoverflow.com/questions/77783708/cant-find-stylesheet-to-import-angular-17
https://v7.material.angular.io/guide/theming

• Remove @import '@angular/material/theming'; from style.scss
• Remove @include angular-material-theme($kendraio-app-theme); from style.scss

Check types errors one by one. Many errors, but at the end where 3 problems that would fix all the errors:

• schemaDefinitions in load-schem-block.component.ts was missing an interface
• if/else in validation-messages.ts was missing a check (field &&). In this way, field.templateOptions was output an error in the case it was null
• jsonSchema in form-block.component.ts is missing a type. Currently, as type any and it results in an error.

Test: Problem with Launch button

• Upgrade minor version of Ag-grid -> nothing changed.
• Check Formly and monaco editor -> They both need a minor update.
• Upgrade all the node module patch versions

Issue with AG Grid custom component:

• Check old PR for Launch button issue -> all changes are implemented.
• Check Ag documentation: no issues documented.
• Check online for similar issues: no issues found.
• Downgrade Ag Grid: Problem with custom component persist. Is Angular v17 the problem?
• Test with Angular 18

--- UPGRADE TO ANGULAR 18

• upgrade node above 18.9
• run ng update @angular/core@18 @angular/cli@18 --force as it doesn't work without force
• Angular cli 18 use a new building system: https://angular.dev/tools/cli/build-system-migration
• upgrade all the packages as per v17
• upgrade typescript with command ng upgrade typescript
• change serviceWorker": "true" (from boolean to string) in angular.json
• fixing types error
• fixing Material UI upgrade (material UI code can be automatically upgraded with codemod)