Verify the Angular 20 upgrade

Sign off the TopFans browser, live SSR, PrimeNG rewrite, and one white-label tenant. PrimeNG is the highest-risk part of this release, even when the TypeScript build is clean.

commit 22cf82a7bb Angular 20.3.31 PrimeNG 20.4.0 Node 20.19.6

Use the QA artifact

Run the application with the repository's pinned Node version. Verify the optimized QA browser and server bundles, then use the Express SSR process for the checks below.

export PATH="$HOME/.nvm/versions/node/v20.19.6/bin:$PATH"
node --max_old_space_size=10048 ./node_modules/@angular/cli/bin/ng build --configuration=qa --prerender=false
PORT=4000 node dist/TopFans/server/server.mjs

build-dev is not the sign-off artifact. This checkout cannot run it because src/environments/environment.dev.ts is absent.

Release fingerprint

  • AngularCore 20.3.31, CLI and SSR 20.3.37
  • MaterialMaterial and CDK 20.2.14
  • PrimeNGPrimeNG 20.4.0 with themes 1.2.5
  • ng-select20.4.0, pinned because later 20.x drops Node 20
  • TypeScript5.8.3 with moduleResolution: bundler
  • Architecture heldNgModules, zone.js, and the application builder remain

Prove SSR from the response body

A page loading in Chrome is not enough. An unapproved host can quietly receive the CSR shell with HTTP 200. Inspect the HTML and server output.

  • Home and login return HTTP 200. Test / and /auth/login with the expected Host header.
  • <app-root> contains rendered markup. An empty root is a CSR fallback, not a pass.
  • PrimeNG theme CSS is in the HTML. Find style elements with data-primeng-style-id. The verified build emitted four.
  • Use one route that was not prerendered. A creator profile is a good live-SSR check.
  • Unknown routes return 404. Do not accept a 200 blank shell for a garbage path.
  • Server output stays clean. There must be no is not allowed, Angular runtime error, or unhandled rejection.
  • Browser hydration preserves the page. Home and login remain populated after JavaScript starts, with no flash to an empty layout.

PrimeNG is the visual regression gate

PrimeNG moved from saga-blue CSS files to Lara styled mode and renamed the classes used by the application's overrides. Check behavior and appearance together.

Custom MultiSelect

  • Open the overlay. It has the expected dark tenant colors, rounded shape, spacing, and scroll container.
  • Search from the custom header. Filtering updates options and does not clear selected values.
  • Select all and clear all. The circular checkbox changes state and option selection matches the control value.
  • Select individual options. Selected rows and checked boxes are visibly distinct.
  • Remove a chip. The times-circle icon is visible and removes only that value.
  • Test both display modes. Exercise chip and comma-separated labels.
  • Use the custom footer. Cancel, confirm, and any feature-specific custom action are visible, themed, and clickable.
  • Use card view at three widths. Check desktop, tablet, and phone layouts for option cards and checkbox positioning.

Start with dynamic forms, then repeat on the song, podcast, item, video, and album portfolio editors. Also check Create Plan and discount-code forms.

Carousel

  • Image overlay and image overlay v2. Previous and next controls appear outside the image at desktop width and remain reachable on mobile.
  • Restricted-content and alert modals. Arrows retain their background, size, contrast, and click target.
  • Reels mobile view. The carousel list does not inherit an unwanted transform and swiping still changes the reel.
  • Circular and autoplay modes. Where enabled, wrapping and timed movement still work without duplicating or skipping items.

Library and product smoke matrix

Area Pass when
Public pages Home, login, creator profile, and a marketing page paint without an empty layout or console exception.
ngx-bootstrap Login, share, and unlock modals open and close. Datepicker, dropdown, tabs, accordion, and typeahead respond.
ng-select A representative select opens, filters, chooses, clears, and renders its existing theme correctly.
Messages Conversation list and thread load. Sending text and opening attachment UI do not throw.
Wallet and Stripe Balance and forms render. Test checkout and Connect complete against a safe environment. ngx-stripe intentionally remains on 18.
Firebase Application startup initializes messaging and remote config without a provider or injection error.
Owl carousel Marketing carousels move in both directions, respond to breakpoints, and do not stack slides.
Audio player An audio post loads, plays, pauses, seeks, and closes. This package still peers on Material 17.
Course expiry The displayed year is the calendar year. Test a date near the December and January boundary to catch the old week-year format.
HMR A small template or style edit updates under ng serve. If it does not, compare with npm run start:no-hmr.

Build and render one white-label tenant

  • Generate in an isolated or disposable working tree. Do not commit generated tenant files or environment data with this release.
  • The generated builder remains application. It must not switch to the new @angular/build package during this hop.
  • The generated styles contain no primeng/resources paths. PrimeIcons stays.
  • The QA tenant build succeeds on Node 20.19.6. Use the same 10 GB heap as TopFans.
  • Request SSR with the tenant's real host. The response has populated app markup and PrimeNG style tags, with no host-allowlist error.
  • Branding survives hydration. Logo, title, theme colors, login, and cover-page behavior stay tenant-specific.
  • Repeat the MultiSelect and Carousel spot checks. Tenant variables must override Lara without losing contrast or control states.

Known noise and deliberate holds

  • Karma has zero specs. ng test --watch=false compiles and Chrome reports 0 of 0 SUCCESS, but the command may still exit 1.
  • Full lint exhausts the heap. It ran out of memory even at 10 GB. Targeted lint still reports existing prefer-standalone findings because this release keeps NgModules.
  • Serverless is not a gate. Do not migrate or build the webpack serverless target for this release.
  • Control-flow syntax is unchanged. The optional @if and @for migration was declined.
  • Zone.js and dynamic platform bootstrap remain. Their Angular 20 deprecation warnings do not mean this release should rewrite bootstrap.
  • ngx-toastr and ngx-stripe remain on their existing majors. Their next majors would pull Angular 21 or a Stripe.js major into this release.

Stop the release if any of these fail

The optimized TopFans QA browser or server bundle does not compile on Node 20.19.6.

A permitted host receives an empty <app-root>, PrimeNG theme styles are absent from SSR HTML, or server output reports a host rejection.

MultiSelect cannot open, select, remove chips, or use its custom footer in dynamic forms and portfolio editors.

Carousel navigation is missing or unusable in overlays, restricted content, or reels.

Wallet checkout, Stripe Connect, audio playback, or a representative white-label tenant regresses.