Skip to content

Angular 16 -> 21 update#883

Open
Blodir wants to merge 34 commits intodevelopmentfrom
angular-update-52938475
Open

Angular 16 -> 21 update#883
Blodir wants to merge 34 commits intodevelopmentfrom
angular-update-52938475

Conversation

@Blodir
Copy link
Contributor

@Blodir Blodir commented Jan 7, 2026

New build system

https://angular.dev/tools/cli/build-system-migration

  • Webpack -> Esbuild
  • angular.json config updated to match
  • Some imports were changed eg. import * as moment from 'moment'; is no longer allowed, use: import moment from 'moment';
  • SSR/hydration is on by default, even on dev builds. If you configure "aot: false" in angular.json, the project will mysteriously stop working (this took ages to figure out, including making a new project to figure out what config difference resulted in errors, fun)

Modules

I kept ngModules, they are still fully supported, but there's a big move away from modules entirely... Every component is now "standalone" by default, so a migration added "standalone: false" to their component declaration.

Dependencies

  • NgxWebstorageModule is removed. It's provided through the provideNgxWebstorage function instead
  • The patch to NgxWebstorage is now removed as it wasn't compatible with new versions. Hopefully it's no longer needed on the new version (I didn't investigate)
  • Built a new version of label designer that's compatible with updated ngx-webstorage
  • The project is no longer compatible with node 16.x, I bumped the nvmrc/volta/jenkinsfile versions to v20.19.6, but it will still have to be updated individually in some CI scripts
  • There's a new officially supported version of NgxDatatable, but I kept the old version as migration would've required more changes. Overrode the rxjs version, so there might be mysterious datatable bugs that we might have to fix (or transition to new version, or out of ngx datatable entirely)

Rxjs 7

Rxjs version bumped and there were various changes. Including:

  • merge -> mergeWith, concat -> concatWith etc.
  • rxjs/operators are now imported from root rxjs
  • stricter typing

New template syntax

*ngFor, *ngIf etc. is all deprecated and will be removed in the next version (22). So I figured we might as well run the migrations now, since everything needs to be tested anyways. Here's a link: https://angular.dev/guide/templates/control-flow. I had to make a few changes where the migration failed. In those cases it looked like an obvious bug, and it's pretty surprising the code was compiling previously. Also post migration I noticed a couple of very weird results: it had inlined a few ng-templates. I didn't go through every change, so there will probably be some oddities that I didn't notice.

@Blodir Blodir marked this pull request as ready for review January 7, 2026 12:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant