[#70195] Upgrade Angular to v21 #21529
Open
+5,352
−4,586
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
myabc
added
maintenance
javascript
myabc
force-pushed
the
code-maintenance/angular-21
branch
2 times, most recently
from
6587be1 to
15a0af2
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
This PR upgrades Angular from version 20 to version 21, applying automated migration changes via ng update @angular/cli @angular/core.
Changes:
- Updates Angular framework and CLI packages from v20.3.x to v21.1.0
- Applies Angular v21 deprecation fixes including new zone change detection setup, template syntax migrations, and test updates
- Updates TypeScript from 5.8.3 to 5.9.3 to align with Angular v21 requirements
Reviewed changes
Copilot reviewed 10 out of 11 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/package.json | Updates Angular packages from v20.3.x to v21.1.0, Angular CDK from v20.2.x to v21.1.0, and TypeScript to v5.9.3 |
| frontend/src/main.ts | Adds provideZoneChangeDetection() to bootstrap configuration per Angular v21 requirements |
| frontend/src/app/shared/components/work-package-graphs/embedded/wp-embedded-graph.html | Migrates deprecated [ngStyle] binding to modern [style.property] syntax |
| frontend/src/app/shared/components/work-package-graphs/embedded/wp-embedded-graph.component.ts | Removes unused CommonModule import from standalone component |
| frontend/src/app/shared/components/user-link/user-link.component.spec.ts | Updates test to use fixture.componentRef.setInput() instead of direct property assignment |
| frontend/src/app/shared/components/primer/base-button.directive.ts | Migrates disabled property handling from host binding to effect-based approach for Angular v21 compatibility |
| frontend/src/app/shared/components/icon/op-icon.spec.ts | Updates test input setting to use fixture.componentRef.setInput() method |
| frontend/src/app/shared/components/attribute-help-texts/attribute-help-text.component.spec.ts | Improves async test handling by using fakeAsync/flush pattern and adds mock resolution |
| frontend/src/app/features/team-planner/team-planner/planner/team-planner.component.ts | Makes nonWorkingDays parameter optional to support event-driven calls |
| frontend/angular.json | Removes 'mixed-decls' from Sass deprecation silencing as it's no longer needed in Angular v21 |
Force updates Angular dependencies:
ng update @angular/core@21 @angular/cli@21 --force
And performs automated upgrade:
= Migrates deprecated bootstrap options to providers.
Angular 21 enables type-checking for host bindings by default.
The directive matches multiple element types but [disabled] is only valid on buttons. Apply disabled property programmatically using an effect that checks the element's tagName first. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Use fakeAsync/flush instead of void fixture.whenStable().then() to properly wait for promise chains before assertions. Also configure the mock service to return a Promise via resolveTo(). Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Use fixture.componentRef.setInput() instead of direct property assignment to properly trigger change detection for OnPush components and avoid ExpressionChangedAfterItHasBeenCheckedError. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
ng update @angular/cdk@21
myabc
force-pushed
the
code-maintenance/angular-21
branch
from
b55c11c to
3345d1f
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Ticket
https://community.openproject.org/wp/70195
What are you trying to accomplish?
Follows on from #19658
Updates Angular to v21:
Merge checklist