Skip to content

chore: migrate to angular 22#504

Merged
aydex merged 1 commit into
developfrom
angular22
Jun 7, 2026
Merged

chore: migrate to angular 22#504
aydex merged 1 commit into
developfrom
angular22

Conversation

@aydex

@aydex aydex commented Jun 5, 2026

Copy link
Copy Markdown
Contributor

Summary

Upgrades the frontend (app/mikane) from Angular 21.2.8 to 22.0.0, run via the
official ng update schematics. Also bumps TypeScript 5.9 → 6.0 (required by
Angular 22).

⚠️ Hold merge until angular-eslint ships a v22 release. The
@angular-eslint/* packages are pinned at 21.4.0 (latest available) against
Angular 22 core. Lint passes, but I'd rather align the toolchain before merging
than land a known version skew.

What changed

  • @angular/* 21.2.8 → 22.0.0, @angular/cdk / @angular/material → 22.0.0
  • typescript ^5.9.3^6.0.3
  • HttpClient backend: schematic added withXhr() to provideHttpClient
    (main.ts). Angular 22 makes fetch the default
    backend; withXhr() preserves the existing XHR behavior so nothing breaks.
  • Change detection: schematic added explicit ChangeDetectionStrategy.Eager
    to 44 components. In v22 the old Default (CheckAlways) is deprecated and
    renamed to Eagersame enum value, identical behavior, no perf change.
  • tsconfig: removed baseUrl (no longer an allowed field) and the now-invalid
    noUnusedLocals. Dropping baseUrl is why every src/... import was rewritten
    to a relative path — this accounts for the bulk of the diff. Unused-locals
    coverage is retained via @typescript-eslint/no-unused-vars: "error".

Diff note

144 files / +2793 −2289 looks large but is ~95% mechanical: the src/...
relative-import rewrite plus prettier reflow. The only behavioral lines to
review are the withXhr() and Eager changes described above.

Verification

  • npm run build — clean (5.3s, no warnings)
  • npm run lint — all files pass
  • npm run test — 561/561 pass (66 files)

Follow-ups (not in this PR)

  • Re-evaluate dropping withXhr() for the fetch backend (only blocker is upload
    progress reporting — verify the avatar upload flow first).
  • With zoneless CD already enabled, the 44 Eager/CheckAlways components are a
    candidate for incremental migration to signal-based OnPush.

@aydex aydex self-assigned this Jun 5, 2026
@aydex

aydex commented Jun 7, 2026

Copy link
Copy Markdown
Contributor Author

Summary

Upgrades the frontend (app/mikane) from Angular 21.2.8 to 22.0.0, run via the
official ng update schematics, plus the matching angular-eslint 21.4.0 → 22.0.0
bump. Also moves TypeScript 5.9 → 6.0 (required by Angular 22).

This was previously waiting on an angular-eslint v22 release; that has now landed,
so the toolchain is fully aligned and the PR is ready.

What changed

  • @angular/*, @angular/cdk, @angular/material 21.2.8 → 22.0.0
  • @angular-eslint/* + angular-eslint 21.4.0 → 22.0.0
  • typescript ^5.9.3^6.0.3
  • HttpClient backend: schematic added withXhr() to provideHttpClient
    (main.ts). Angular 22 makes fetch the default
    backend; withXhr() preserves existing XHR behavior so nothing breaks.
  • Change detection: schematic added explicit ChangeDetectionStrategy.Eager
    to 44 components. In v22 the old Default (CheckAlways) is deprecated and
    renamed to Eagersame enum value, identical behavior, no perf change.
  • tsconfig: removed baseUrl (no longer an allowed field) and the now-invalid
    noUnusedLocals. Dropping baseUrl is why every src/... import was rewritten
    to a relative path — this accounts for the bulk of the diff. Unused-locals
    coverage is retained via @typescript-eslint/no-unused-vars: "error".
  • ESLint flat config (eslint.config.mjs),
    required by angular-eslint v22:
    • Switched the template block from the legacy
      compat.extends("plugin:@angular-eslint/template/...") shim (dropped in v22)
      to the native flat configs ...angular.configs.templateRecommended /
      ...templateAccessibility, matching how the TS block already worked. Removed
      the now-unused FlatCompat machinery.
    • v22's tsRecommended enables prefer-on-push-component-change-detection. Moved
      the pre-existing override (which was misplaced in the .html block and dormant
      under v21) into the TS block as "warn" — keeps the OnPush nudge visible
      without failing CI given the 44 Eager components above.

Diff note

The bulk of the line count is mechanical: the src/... → relative-import rewrite
plus prettier reflow. The only behavioral lines to review are the withXhr(),
Eager, and ESLint config changes described above.

Verification

All run on the full Angular 22 + angular-eslint 22 toolchain:

  • npm run build — clean, no warnings
  • npm run lint — 0 errors (44 prefer-on-push warnings, intentional)
  • npm run test — 561/561 pass

Follow-ups (not in this PR)

  • Re-evaluate dropping withXhr() for the fetch backend (only blocker is upload
    progress reporting — verify the avatar upload flow first).
  • With zoneless CD already enabled, the 44 Eager/CheckAlways components are
    candidates for incremental migration to signal-based OnPush — the lint rule is
    set to warn to track this.

@aydex aydex requested a review from motionduck June 7, 2026 16:02
@aydex aydex enabled auto-merge June 7, 2026 16:06
@aydex aydex merged commit 5add8eb into develop Jun 7, 2026
9 checks passed
@aydex aydex deleted the angular22 branch June 7, 2026 16:08
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.

2 participants