Repository navigation
Conversation
- Bump Angular, CDK/Material, NgRx Signals and angular-eslint to v20. - Bump Analog vitest integration to v2 and TypeScript to 5.9. - Apply ng update migrations (SSR withRoutes, BootstrapContext, schematics defaults). - Migrate resource() usages from request to params. - Bump pinned Node.js to 24.21.0.
- Bump Angular, CDK/Material, NgRx Signals and angular-eslint to v21. - Keep zone-based change detection explicit now that zoneless is the default. - Apply control flow migration to the problematic component. - Bump ngx-device-detector to v11 and adapt to its inject()-based constructor.
- Bump Angular, CDK/Material, NgRx Signals, ngx-device-detector and angular-eslint to v22. - Bump TypeScript to 6.0 and typescript-eslint to 8.70. - Apply ng update migrations (explicit ChangeDetectionStrategy.Eager, extended diagnostics opt-out). - Move ESLint config to the angular-eslint flat config package. - Bump Vitest to v4 and Vite to v7; use platform-browser testing APIs. - Drop deprecated platform-browser-dynamic and unused @nx/vite, vite-tsconfig-paths. - Update README Angular version.
Angular v22 requires Node.js ^22.22.3 or ^24.15.0.
Warestack Governance ChecksWarestack is installed for this GitHub account, but this installation is not connected to a Warestack space yet. Get started:
This message is posted once per new pull request while this installation is not connected. |
✅ Deploy Preview for ng-pokedex-optimization ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
The styles were accidentally emptied in cbc0767. Without the relative, sized .banner container the fill-mode NgOptimizedImage banner stretched over the whole viewport and covered the toolbar.
- Bump @netlify/angular-runtime to v4, required for @angular/ssr 22 on Netlify. - Replace the Express-based server with the runtime's documented App Engine handler, since Netlify deploys it as a Deno edge function. - Configure allowedHosts and trustProxyHeaders via the runtime helpers. - Drop the unused express dependency and the static-only serve:ssr script.
- Drop withIncrementalHydration() and withFetch(); both are defaults in v22. - Drop provideAnimationsAsync() and @angular/animations; Material no longer depends on the animations package. - Remove redundant standalone flags and an unused trackBy function. - Remove the AppComponent window click listener (it never ran, as the referenced toggleButton does not exist) and the manual openMenu() call that prevented the menu button from closing the menu.
The rule stayed in the page stylesheet when the grid was extracted into BannerGridComponent (a8cad0d), where view encapsulation prevents it from reaching the component's cards.
- Remove zone.js and provideZoneChangeDetection(); zoneless change detection is the v22 default. - Drop the ChangeDetectionStrategy.Eager overrides added by the v22 migration and re-enable prefer-on-push-component-change-detection. - Convert state mutated outside template bindings (breakpoint observer, form toggles) to signals. - Use Analog's zoneless TestBed setup, stub IntersectionObserver for @defer (on viewport) under jsdom, and replace fakeAsync with whenStable(). Initial bundle drops from 669 kB to 626 kB.
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
Upgrades the project from Angular v19 to v22, one major version per commit (v20 → v21 → v22), applying the official
ng updatemigrations at each step. It then brings the app in line with v22 defaults (zoneless, OnPush, no deprecated APIs), fixes two styling regressions on the optimized pokedex page, and updatesserver.tsfor the Netlify Angular runtime v4.Changes
Angular upgrade
8ce6fe8): Angular, CDK/Material, NgRx Signals and angular-eslint bumped to v20; Analog 2.x; TypeScript 5.9. Migrations applied (withRoutes,BootstrapContext);resource()request→params. Pinned Node.js bumped to 24.21.0.735bb44): v21 packages;ngx-device-detectorv11 (inject()-based constructor); control flow migration.f8374a5): v22 packages, TypeScript 6.0,ngx-device-detectorv12,angular-eslintflat config package, Vitest 4 / Vite 7; removed@angular/platform-browser-dynamic,@nx/vite,vite-tsconfig-paths.b15d735): PR checks on Node.js 24 and pnpm 10.Netlify SSR (
25baa42)@netlify/angular-runtimebumped to v4. The runtime requires v4 for@angular/ssr21.2.9+, and v4 removes the@netlify/angular-runtime/contextimport the oldserver.tsused.server.tsreplaced with the runtime's documented App Engine handler, includingallowedHostsandtrustProxyHeaders. Netlify deploys this module as a Deno edge function, so it no longer bundles Express or Node-only APIs.expressand theserve:ssrscript. That script only served static files, because SSR runs throughnetlifyAppEngineHandler.ng servestill renders on the server throughreqHandler.v22 alignment
8d68814): removedwithIncrementalHydration()andwithFetch(), which are defaults in v22, plusprovideAnimationsAsync()and@angular/animations; Material no longer needs the package. Also removed deadAppComponentclick handling: the window listener never ran, and the manualopenMenu()call stopped the menu button from closing the menu.7c66d28): removedzone.jsand theChangeDetectionStrategy.Eageroverrides the migration had added. State that changes outside template bindings (breakpoint observer, form toggles) now uses signals. Tests run on Analog's zoneless TestBed. The initial bundle drops from 669 kB to 626 kB, below the pre-upgrade 640 kB.UI regressions on
/pokedex-optimized0b69190):cbc0767("Test precommit.") emptiedpokedex.component.scss. Without theposition: relative, fixed-height.bannercontainer, the fill-modeNgOptimizedImagebanner stretched across the whole viewport and hid the toolbar. The styles are restored.46b7587): the rule that hides previews at ≤960px stayed in the page stylesheet when the grid was extracted intoBannerGridComponent(a8cad0d, March 2024). View encapsulation kept it from applying. It now lives in the component again.Verification
Run locally on the final commit:
pnpm build,pnpm lint,pnpm format:check: pass.pnpm test: 16 files, 44 tests pass.ng servewith SSR, PokéAPI mocked), all 13 pass:/pokedex-optimizedrenders on the server; the toolbar is visible and not covered; the banner is 480px tall./pokedex-badswitches to 2 columns and the mobile banner on small screens./pokemon-optimized/ivysaurrenders when opened directly.Still to verify on the Deploy Preview: open an SSR route such as
/pokedex-optimizeddirectly. The production edge crash couldn't be reproduced locally: the deployedmainbundle renders under Deno 2 with Netlify's built-in import map, so the root cause needs confirming against the Netlify edge function logs.Follow-ups (not in this PR)
RouterTestingModuletoprovideRouter().httpResource()in place of the manualfetch-basedresource()loaders.@netlify/angular-runtime"Missing Netlify-specific environment variable" warnings from local builds (expected outside Netlify).