Repository navigation
Wip/angular 22 update - #3377
Merged
Merged
Conversation
- ng update @angular/core@21 @angular/cli@21 @angular/material@21 @ngrx/store@21 (Angular 21.2.25, CLI 21.2.27, Material/CDK 21.2.14, NgRx 21.1.1) - Migrations applied: control flow (*ngIf -> @if, unused CommonModule imports removed), bootstrap options -> provideZoneChangeDetection() in main.ts, tsconfig moduleResolution -> bundler and lib default (es2022) - Bump third-party deps whose peer ranges stopped at Angular 20: @swimlane/ngx-charts 25, @danielmoncada/angular-datetime-picker 22, jest-preset-angular 16.2 (requires Jest 30, jest-environment-jsdom 30, @types/jest 30), ts-jest 29.4 - Pin frontend TypeScript to ~5.9.3 and remove the root npm-only "overrides" block (ignored by yarn v1; stale ~5.5.4 pin) - Set cli.packageManager to yarn in angular.json so ng update installs via the workspace's yarn instead of npm - scroll.directive: drop unused $event HostListener arg (Angular 21 now checks HostListener args against the handler signature) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- ng update @angular/core@22 @angular/cli@22 @angular/material@22 @ngrx/store@22 (Angular/CLI/Material/CDK 22.2.3, NgRx 22.0.1) - Migrations applied: ChangeDetectionStrategy.Eager added to the 21 components without an explicit strategy (v22 defaults to OnPush), withXhr() added to provideHttpClient (v22 defaults to fetch), $safeNavigationMigration() wrapping 31 template optional-chain expressions to keep pre-v22 semantics, strictTemplates: false in tsconfig.app.json - Drop the extendedDiagnostics suppressions the safe-navigation migration added: they conflict with strictTemplates: false (NG4003) and only take effect when strict templates are enabled - TypeScript 6.0 (required by compiler-cli 22): replace deprecated baseUrl with tsconfig-relative paths, drop deprecated alwaysStrict: false (all sources are ES modules, so already strict), set rootDir to .. to keep TS 5's inferred root now that it defaults to the tsconfig dir - Remove unused codelyzer (its peer range < Angular 13 blocks ng update); this also removes its zone.js 0.10 copy, so zone.js 0.15 now hoists to the root and the hardcoded zone.js/testing jest mapping is dropped in favor of zone.js's own exports map - Re-resolve @jridgewell/sourcemap-codec to 1.6.0: compiler-cli 22 imports encodeRangeMappings (1.6+) but declares ^1.4.14, and the lockfile had 1.5.5 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
🔵 Needs a closer look
The combined framework, compiler, and test-runner upgrades require successful build, test, and browser validation plus human review.
0 open findings
What changed in this PR
Updates UpGrade’s frontend from Angular 20 to Angular 22, adapting application behavior and tooling for the newer framework.
Changes:
- Upgrades Angular, NgRx, charting, TypeScript, and Jest dependencies.
- Explicitly configures change detection and HTTP transport, and migrates template syntax.
- Updates compiler settings, module resolution, and CLI configuration.
| File | Description |
|---|---|
| packages/frontend/tsconfig.json | Updates module resolution, paths, and compiler defaults. |
| packages/frontend/projects/upgrade/tsconfig.app.json | Explicitly disables strict template checking. |
| packages/frontend/projects/upgrade/src/main.ts | Provides zone-based change detection during bootstrap. |
| packages/frontend/projects/upgrade/src/app/shared/directives/scroll.directive.ts | Removes the unused scroll-event argument. |
| packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-tag-input/common-tag-input.component.ts | Explicitly selects eager change detection. |
| packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-modal/common-modal.component.ts | Explicitly selects eager change detection. |
| packages/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-details-participant-list-table/common-details-participant-list-table.component.html | Migrates optional-navigation bindings. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/segments/pages/segment-root-page/segment-root-page.component.ts | Explicitly selects eager change detection. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/segments/pages/segment-root-page/segment-root-page-content/segment-root-section-card/segment-root-section-card.component.html | Migrates permission bindings. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/segments/pages/segment-details-page/segment-details-page.component.ts | Sets eager detection and removes CommonModule. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/segments/pages/segment-details-page/segment-details-page-content/segment-lists-section-card/segment-lists-section-card.component.html | Migrates the list-action permission expression. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/segments/pages/list-details-page/list-details-page.component.html | Migrates the parent-name binding. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/segments/modals/upsert-list-values-modal/upsert-list-values-modal.component.ts | Removes CommonModule imports. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/segments/modals/edit-list-value-modal/edit-list-value-modal.component.ts | Removes CommonModule imports. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/profile/profile-root/profile-root.component.ts | Explicitly selects eager change detection. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/profile/components/profile-info/profile-info.component.ts | Explicitly selects eager change detection. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/profile/components/profile-info/profile-info.component.html | Migrates image and role bindings. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/profile/components/modals/add-metrics/add-metrics.component.ts | Explicitly selects eager change detection. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/global-logs/pages/global-logs-root-page/global-logs-root-page.component.ts | Explicitly selects eager change detection. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page.component.ts | Explicitly selects eager change detection. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card.component.html | Migrates creation-permission bindings. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page.component.ts | Explicitly selects eager change detection. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component.html | Migrates the toggle-permission binding. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-inclusions-section-card/feature-flag-inclusions-section-card.component.html | Migrates the inclusion-action permission expression. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-exclusions-section-card/feature-flag-exclusions-section-card.component.html | Migrates the exclusion-action permission expression. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-root-page/experiment-root-page.component.ts | Explicitly selects eager change detection. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-root-page/experiment-root-page-content/experiment-root-section-card/experiment-root-section-card.component.html | Migrates creation-permission bindings. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page.component.ts | Explicitly selects eager change detection. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-payloads-section-card/experiment-payloads-table/experiment-payloads-table.component.html | Migrates the payload-tooltip binding. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-metrics-data-section-card/experiment-query-result/experiment-query-result.component.ts | Explicitly selects eager change detection. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-metrics-data-section-card/experiment-query-result/experiment-query-result.component.html | Migrates optional query-ID expressions. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-enrollment-data-section-card/enrollment-over-time/enrollment-over-time.component.ts | Explicitly selects eager change detection. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-enrollment-data-section-card/enrollment-condition-table/enrollment-condition-table.component.ts | Explicitly selects eager change detection. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/pages/experiment-details-page/experiment-details-page-content/experiment-conditions-section-card/experiment-conditions-section-card.component.html | Migrates the prior binding. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/modals/upsert-experiment-modal/upsert-experiment-modal.component.html | Migrates the adaptive-config binding. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/modals/upsert-experiment-modal/ts-configurable-policy-parameters-form/ts-configurable-policy-parameters-form.component.ts | Explicitly selects eager change detection. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/modals/pause-experiment-modal/pause-experiment-modal.component.html | Migrates the translated experiment-name argument. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/experiments/modals/edit-condition-prior-modal/edit-condition-prior-modal.component.html | Replaces error-display *ngIf directives with @if. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/experiment-users/experiment-users-root/experiment-users-root.component.ts | Explicitly selects eager change detection. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/experiment-users/components/preview-user/preview-user.component.ts | Explicitly selects eager change detection. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/experiment-users/components/preview-user/preview-user.component.html | Migrates condition and user-ID expressions. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/experiment-users/components/experiment-users/experiment-users.component.ts | Explicitly selects eager change detection. |
| packages/frontend/projects/upgrade/src/app/features/dashboard/dashboard-root/dashboard-root.component.ts | Explicitly selects eager change detection. |
| packages/frontend/projects/upgrade/src/app/core/core.module.ts | Explicitly selects XHR HTTP transport. |
| packages/frontend/projects/upgrade/src/app/app.module.ts | Explicitly selects XHR HTTP transport. |
| packages/frontend/projects/upgrade/src/app/app.component.ts | Explicitly selects eager change detection. |
| packages/frontend/package.json | Upgrades framework and development dependencies. |
| packages/frontend/jest.config.js | Removes the zone-testing resolution override. |
| packages/frontend/angular.json | Configures Yarn as the CLI package manager. |
| package.json | Removes the frontend TypeScript override. |
🧠 Review effort: Balanced
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
danoswaltCL
force-pushed
the
wip/angular-22-update
branch
from
October 22, 2026 19:06
2e03ef0 to
a0da0e8
Compare
bcb37
approved these changes
Oct 22, 2026
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
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.
No description provided.