Update Angular to v22, adopt OnPush, and modernize tooling - #176
Merged
Conversation
Run ng update for @angular/core, @angular/cli, @angular/material and @angular-eslint to v22, applying the official v22 migrations (explicit ChangeDetectionStrategy.Eager, safe-navigation, strict-template diagnostics, tsconfig updates). - Migrate ESLint flat config to the angular-eslint v22 umbrella package, since the individual plugins no longer expose preset configs. - Disable prefer-on-push-component-change-detection to keep the migration's behavior-preserving Eager strategy. - Bump CI Node version from 20.x to 22.x (required by Angular 22). - Update README to reference Angular 22. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Replace ChangeDetectionStrategy.Eager with OnPush across all components - Remove now-redundant prefer-on-push-component-change-detection eslint override - Update unit specs for OnPush (setInput / component-view CDR detectChanges) - Bump GitHub Actions workflows to Node 24.x LTS - Set explicit rootDir in cypress tsconfig for TypeScript 6 (TS5011) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Drop @angular/animations (unused; optional peer, app has no provideAnimations) - Drop @angular/platform-browser-dynamic (unused; app bootstraps via @angular/platform-browser) - Drop @types/diff (redundant stub; diff ships its own type definitions) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Updates DevToolBox to Angular 22 and TypeScript 6, aligns component change detection with OnPush, and modernizes linting/Cypress/CI configuration to match the updated ecosystem expectations.
Changes:
- Upgraded Angular framework/tooling packages to v22 and TypeScript to v6; updated README to reflect the new Angular version.
- Adopted
ChangeDetectionStrategy.OnPushacross components and adjusted unit tests to usesetInput(...)/ explicitChangeDetectorRef.detectChanges()patterns. - Modernized tooling configs: switched ESLint flat-config to the
angular-eslintumbrella presets, tightened Cypress env handling, fixed Cypress TS rootDir regression, and bumped CI Node to 24.x.
Reviewed changes
Copilot reviewed 29 out of 30 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| tsconfig.spec.json | Suppresses specific Angular compiler extended diagnostics in spec builds. |
| tsconfig.app.json | Suppresses specific Angular compiler extended diagnostics in app builds. |
| src/app/component/tools/time-converter/time-converter.component.ts | Enables OnPush change detection for the time converter component. |
| src/app/component/tools/time-converter/time-converter.component.html | Applies Angular 22 safe-navigation migration markers in template expressions. |
| src/app/component/tools/json-validator/json-validator.component.ts | Enables OnPush change detection for the JSON validator component. |
| src/app/component/tools/json-validator/json-validator.component.spec.ts | Updates tests to trigger CD explicitly under OnPush. |
| src/app/component/tools/base64-encoder/base64-encoder.component.ts | Enables OnPush change detection for the Base64 encoder component. |
| src/app/component/tools/base64-encoder/base64-encoder.component.spec.ts | Updates tests to trigger CD explicitly under OnPush. |
| src/app/component/nav-list/nav-list.component.ts | Enables OnPush change detection for the nav list component. |
| src/app/component/nav-list/nav-list.component.spec.ts | Updates tests to trigger CD explicitly under OnPush. |
| src/app/component/home/home.component.ts | Enables OnPush change detection for the home component. |
| src/app/component/footer/footer.component.ts | Enables OnPush change detection for the footer component. |
| src/app/component/error/error.component.ts | Enables OnPush change detection for the error component. |
| src/app/component/common/text-area/text-area.component.ts | Enables OnPush change detection for the text-area component. |
| src/app/component/common/text-area/text-area.component.spec.ts | Updates tests to use componentRef.setInput(...) under OnPush. |
| src/app/component/common/readonly-text-area/readonly-text-area.component.ts | Enables OnPush change detection for the readonly text-area component. |
| src/app/component/common/readonly-text-area/readonly-text-area.component.spec.ts | Updates tests to use componentRef.setInput(...) under OnPush. |
| src/app/component/common/output-field/output-field.component.ts | Enables OnPush change detection for the output-field component. |
| src/app/component/common/output-field/output-field.component.spec.ts | Updates tests to use componentRef.setInput(...) under OnPush. |
| src/app/component/common/json-viewer/json-viewer.component.ts | Enables OnPush change detection for the JSON viewer component. |
| src/app/component/common/json-viewer/json-viewer.component.spec.ts | Updates tests to rely on setInput(...) + detectChanges() instead of manual ngOnChanges(). |
| src/app/app.component.ts | Enables OnPush change detection for the root app component. |
| README.md | Updates documentation to state the project is now Angular 22. |
| package.json | Updates Angular/CLI/ESLint deps for v22, removes redundant deps, bumps TypeScript to v6. |
| eslint.config.js | Migrates ESLint flat config to angular-eslint umbrella presets for TS/templates. |
| cypress/tsconfig.json | Adds rootDir to address TS6/Cypress compilation regression. |
| cypress.config.ts | Disables legacy Cypress env exposure via allowCypressEnv: false. |
| .github/workflows/deploy.yml | Bumps CI Node version to 24.x. |
| .github/workflows/build.yml | Bumps CI Node version to 24.x. |
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.
Why
DevToolBox was on Angular 21. This brings the app up to Angular 22 (the current major), adopts the change-detection and tooling defaults that Angular 22 now expects, and trims dependencies that became deprecated or redundant along the way.
What changed
Angular 22 upgrade
ng updatefor@angular/core,@angular/cli,@angular/material, and@angular-eslint/schematicsto v22, with TypeScript bumped to ^6.eslint.config.jsfor@angular-eslintv22: the individual plugins no longer export flat-config presets, so it now consumes theangular-eslintumbrella package (tsRecommended/templateRecommended/templateAccessibility).OnPush change detection
ChangeDetectionStrategy.EagerwithOnPushacross all 13 components (diff-viewer was already OnPush). The app uses a consistent event-output + input-binding architecture, so OnPush is runtime-safe.prefer-on-push-component-change-detectioneslint override; the codebase is fully compliant with the recommended rule.@Input-driven specs usecomponentRef.setInput(...), and internal-state specs force the component view via its ownChangeDetectorRef.detectChanges().Tooling / CI
^24.15.0engine requirement).rootDirincypress/tsconfig.jsonto fix a TypeScript 6 regression (TS5011) that was breaking the entire e2e suite.Dependency cleanup
@angular/animations(unused optional peer),@angular/platform-browser-dynamic(app bootstraps via@angular/platform-browser), and@types/diff(redundant stub;diffships its own types).Notes for reviewers
tsconfig.app.json/tsconfig.spec.jsonsuppress thenullishCoalescingNotNullableandoptionalChainNotNullableextended diagnostics. These were added by the Angular 22 migration because the tightened reactive-forms template typing now flags the existing?./??usage intime-converter.component.htmlas redundant. The operators remain meaningful at runtime, so the diagnostics are suppressed rather than rewriting every expression.$safeNavigationMigration()markers in the time-converter template are an official Angular 22 compiler construct (transformed at build time) and are intended to stay in source.Verification