Migrate Angular 14 to 18 - #605
Merged
Merged
Conversation
RxJS 7 is required for Angular 16+. toPromise() is deprecated in RxJS 7 — replaced all 17 call sites across 10 files with firstValueFrom() from rxjs. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- TypeScript 5.4, zone.js 0.14 - Removed legacy Material component imports (84 occurrences across 58 files) - Fixed mat-slider API (thumbLabel -> discrete, added matSliderThumb input) - Fixed form field appearance (standard -> outline) - Updated SwUpdate API (available/activated -> versionUpdates) - Removed deprecated @angular/material/theming SCSS imports - Updated SCSS from legacy to non-legacy Material mixins Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Migration path: Angular 14 → 15 → 16 → 17 → 18 Key changes: - RxJS 6.6 → 7.8 (toPromise → firstValueFrom, 17 call sites) - TypeScript 4.8 → 5.4 - Angular Material legacy → MDC components (84 imports, SCSS) - zone.js 0.11 → 0.14 - FontAwesome angular-fontawesome 0.11 → 0.15 (spin/pulse → animation) - angular-eslint 14 → 18, typescript-eslint 5 → 8 - SwUpdate API modernized (available → versionUpdates) - HttpClientModule → provideHttpClient - Removed ngcc postinstall - Removed deprecated @angular/material/theming imports - Fixed mat-slider API, form field appearance - Updated ESLint config for v8 rule changes Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
All 7 phases of the modernization plan are now complete. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- gear-parser: mw?.tier → (mw?.tier ?? 0) for safe comparison - milestone-parser: optional indexOf → nullish coalescing fallback - Theme files: use map-based API for m2-define-light/dark-theme Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…y warning Remove redundant mat-button from elements that also have mat-icon-button (NG0300 in Material 15+). Use all-component-colors() instead of all-component-themes() for secondary themes to avoid duplicate density styles. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add [tabPanel] binding and <mat-tab-nav-panel> wrapper to all 10 mat-tab-nav-bar instances across player, clan, pursuits, triumphs, collections, uber-list, and lost-sector-next-days components. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Check vendors?.data before iterating to handle cases where the vendor data array hasn't been populated yet. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Wrap in arrow functions to preserve the BungieService instance context. Passing a method reference directly as map(this.x.method) loses 'this'. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Material 15+ uses MDC-based components with different CSS classes: - .mat-tab-label → .mat-mdc-tab - .mat-tab-link → .mat-mdc-tab-link - .mat-table/row/cell → .mat-mdc-table/row/cell - .mat-card* → .mat-mdc-card* - .mat-form-field* → .mat-mdc-form-field* - .mat-input-element → .mat-mdc-input-element - .mat-radio-* → .mat-mdc-radio-* - .mat-checkbox-* → .mdc-checkbox/.mdc-form-field - .mat-chip → .mat-mdc-chip - .mat-dialog-content → .mat-mdc-dialog-content - .mat-nav-list → .mat-mdc-nav-list - .mat-stroked-button → .mat-mdc-outlined-button - .mat-list-item-content → .mdc-list-item__content Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- mat-line → matListItemLine - mat-list-icon → matListItemIcon Fixes garbled rendering in lost sectors and nightfall list items. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Density was only generated inside .default-theme via all-component-themes(), so .light-theme and .black-theme (using all-component-colors()) got default Material density instead. Moving density to global scope fixes select dropdowns and other components being taller in non-default themes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
MDC components at density 0 are larger than the old legacy Material components. Using density -2 brings row heights, form fields, and button toggles back to the compact sizing the app had before migration. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
MDC mat-icon-button has a larger default size that was overriding the custom tag button dimensions in the gear table. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The button-toggle-label-content class was NOT renamed in the MDC migration — it stays as .mat-button-toggle-label-content. The earlier rename to .mat-mdc-button-toggle-label-content broke the line-height override, making the toggle bar too tall. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
MDC mat-icon-button defaults to 48px (40px at density -2), but form field suffix buttons (clear, help) were ~20px in legacy Material. Add global override to size them at 24px inside mat-form-field. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
MDC form fields render as rounded rectangles with hidden labels. Override globally to restore legacy look: transparent background, bottom border only, and always-visible floating label in resting position. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
MDC fill form fields add 16px horizontal padding on the wrapper, making fields 32px wider than legacy. Zero out the padding to restore the original sizing. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Adjust infix padding (16px top, 6px bottom), min-height (unset), font size (13px), and line-height (15px) to match legacy Material's ~53px form field height. Hide subscript wrapper that MDC reserves by default. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
MDC tab links default to flex-grow: 1, causing them to stretch across the full nav bar width. Legacy tabs used min-width: 160px and flex-grow: 0. Match the legacy behavior for consistent tab sizing. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Use font-size: inherit throughout the fill form field chain so fields inherit from their container context (e.g. 13px in gear-body, 16px default) instead of the hardcoded 13px override that was wrong for some pages - Remove hardcoded dark-theme-only border-bottom color and rely on MDC line-ripple which is already theme-aware (works in both light and dark) - Remove redundant line-ripple color overrides Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add flex-wrap: wrap to .milestone-row so "Resets in X days" wraps below the reward description instead of staying inline. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
MDC button toggle sets explicit 16px font-size, blocking inheritance from container (e.g. 13px in .gear-body). Set font-size: inherit on the toggle element so it matches the surrounding context, bringing the gear page toggle bar width closer to production. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
MDC components use letter-spacing: 1.25px per the Material Design spec, but legacy Angular Material used normal letter-spacing. This made tabs and buttons look more spread out and less compact than production. Reset letter-spacing to normal on .mat-mdc-tab, .mat-mdc-tab-link, and .mdc-button. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
package-lock.json had stale resolved URLs pointing to npm.fontawesome.com (the private FontAwesome Pro registry) for free FA packages that are available on the public npm registry. CI fails with E401 because it doesn't have FontAwesome registry credentials. Updated the three resolved URLs to use registry.npmjs.org instead. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
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
1 participant
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.
Summary
Complete Angular migration from 14.2 to 18.2, going one major version at a time:
toPromise()calls withfirstValueFrom()across 10 filesrelativeLinkResolutionAll 185 tests pass. Lint clean (0 errors). Build compiles.
Test plan
npm run test:ci— 185/185 tests passnpm run lint— 0 errors (469 no-explicit-any warnings expected)npx ng build— dev build succeeds🤖 Generated with Claude Code