Migrate from Angular 15 to Angular 16

[hatfieldjm4]

Angular 16 was released May 3rd and is now an approved standard in GEAR. LTS of Angular 15 ends May 2024. Source: https://angular.io/guide/releases

[hatfieldjm4]

I first upgraded zone.js from v0.11.8 to v0.13.0 (npm install zone.js@0.13.0), suggested by the Angular Update Guide. Initial update command (npm run ng update @angular/core@16 @angular/cli@16) resulted in an error, so I specified the latest patch version and reversed the order of core and cli to cli and core: npm run ng update @angular/cli@^16 @angular/core@^16

This appeared to run successfully, but after I tried to start the angular app locally, I received 2 errors (note these errors prevented localhost:4200 from compiling, but the app served on localhost:3000 seemingly normally):

1. Error: src/app/app.module.ts:124:12 - error NG6002: 'SidebarModule' does not appear to be an NgModule class. This likely means that the library (ng-sidebar) which declares SidebarModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
2. Error: src/app/app.module.ts:131:5 - error NG6002: 'NgxChartsModule' does not appear to be an NgModule class. This likely means that the library (@swimlane/ngx-charts) which declares NgxChartsModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

I tried an “npm install” to see if this would fix the issue. These resulted in several peer dependency errors. I noticed that @angular/cdk and @angular/material were both still running version 15.2.2 when I checked the Angular version (npm run ng version). To upgrade cdk and material, I used the following command: npm run ng update @angular/cdk@^16 @angular/material@^16

After installing these two packages successfully, I started the local server, and again it failed to compile for localhost:4200.

[hatfieldjm4]

Both ng-sidebar and @swimlane/ngx-charts will need to be addressed.

• ng-sidebar: NPM said ng-sidebar has been deprecated and is no longer maintained. This will need to be addressed in the following files which mention “sidebar”:

  • src\app\app.component.ts
  • src\app\app.module.ts
  • src\app\components\sidenav\sidenav.component.css
  • src\app\components\sidenav\sidenav.component.html
  • src\app\components\sidenav\sidenav.components.ts
  • src\app\components\top-navbar\top-navbar.component.css
  • src\app\services\shared\shared.service.ts
  • package.json and package-lock.json

• @swimlane/ngx-charts: this package is still updated regularly, so I’m not sure what the issue is. Perhaps it just needs to be upgraded. I ran the following update: npm install @swimlane/ngx-charts@20.3.0. This resulted in an error: While resolving: @ng-select/ng-select@10.0.3 npm ERR! Found: @angular/common@16.0.3.

  • I think this means that @ng-select/ng-select@10.0.3 needs to be updated (though it is not a dependency of @swimlane/ngx-charts, so that’s puzzling).
  • I ran the following update: npm install @ng-select/ng-select@11.0.0. This was installed successfully. I will note that this may have taken ng-sidebar out of the package.json and package-lock.json files. I tried running an npm start after this, and it is still failing on ng-sidebar and @swimlane/ngx-charts
  • I retried to install @swimlane/ngx-charts@20.3.0. This was now installed successfully. I again tried running an npm start after this, and it unsurprisingly still had the ng-sidebar error. It also returned this error:
  • Error: src/app/views/systems/time/time.component.ts:5:27 - error TS2307: Cannot find module '@swimlane/ngx-charts/esm2015/lib/utils/color-sets'
  • I edited the time.component.ts file to reference the esm2020 folder (instead of "esm2015"), since this still had lib/utils/color-sets in it.

[hatfieldjm4]

The only item that remains now is ng-sidebar. I've documented my fix to the @swimlane/ngx-charts issue in the GEAR Playbook, and I committed the Angular16 branch with all other dependencies resolved (except ng-sidebar).

[hatfieldjm4]

I found a repo that someone forked off of the initial ng-sidebar repo, and they added configurability with Angular 16. I uninstalled ng-sidebar and installed the ng-sidebar-v2 library, made a quick edit to an import reference, and I was able to build and serve on 4200 successfully. I've saved my edits to the Angular16-hotfix branch. This ng-sidebar-v2 library may not be a viable long term solution, though. I'm not sure if the person will continually update it for upgraded versions of Angular. It only has about 8 downloads in the last week, according to npm.