Verify the Angular 16 upgrade

Automated compilation has passed. Use this page to review the exact proof already collected and finish the runtime checks that need a browser, backend data, payment test mode, or a generated white-label project.

Verified on 11 September 2026 with Node.js 18.20.8

Automated checks completed

  • npm ls --depth=0 passed. No root dependency is missing or invalid.
  • The development browser build passed. TypeScript, Angular templates, styles, assets, and lazy chunks compiled.
  • The production browser build passed. Optimization, hashed output, index generation, and service-worker generation completed.
  • The development SSR build passed. The server bundle and server-side lazy chunks compiled.
  • A source scan found no remaining imports of TransferState or makeStateKey from @angular/platform-browser.
  • A source scan found no remaining withServerTransition, CanActivate, entryComponents, renderModuleFactory, BrowserTransferStateModule, or ReflectiveInjector references.

Final compatibility changes covered by those checks

Transfer state

platform.service.ts, api-cache.service.ts, and cache.service.ts import TransferState and makeStateKey from @angular/core. Verify one SSR-rendered page that uses cached GET data, then confirm the browser does not immediately repeat the same request during hydration.

Browser module

AppModule imports BrowserModule directly. Load an SSR page, inspect its first paint, and check that styles remain present after Angular starts in the browser.

Route guard

WhitelabelSiteOnlyGuard keeps its canActivate() method without the deprecated class interface. Test the same protected route on the main TopFans site and on a white-label site.

Manual release checks

  1. Sign in and sign out. Open routes protected by authentication, creator, dashboard, and white-label guards. Confirm redirects still land on the expected route.
  2. Open a public page through SSR with JavaScript disabled first. Confirm meaningful HTML and styles exist. Enable JavaScript, reload, and check for hydration-time errors or duplicate API calls.
  3. Enter and edit masked wallet values. Check valid, invalid, empty, pasted, and mobile-keyboard input.
  4. Add and remove items in the custom multiselect. Confirm chip removal emits one change and leaves the correct selected values.
  5. Use Stripe test mode for a successful payment, a declined payment, and a cancelled flow. Confirm the UI returns to a usable state each time.
  6. Play, pause, seek, minimize, and resume audio. Check one supported video flow and one live-stream flow if the test environment has fixtures.
  7. Install or refresh the production PWA. Confirm the service worker registers and a second visit loads the expected shell.
  8. Generate one representative white-label project. Run its browser and SSR builds, then check tenant colors, URLs, public routes, and the white-label-only guard.

Commands to repeat in CI or QA

nvm use
npm install
npm ls --depth=0
node --max_old_space_size=10048 ./node_modules/@angular/cli/bin/ng build --configuration=development
node --max_old_space_size=10048 ./node_modules/@angular/cli/bin/ng build --configuration=production
node --max_old_space_size=10048 ./node_modules/@angular/cli/bin/ng run TopFans:server:development
rg -n "withServerTransition|CanActivate|entryComponents|renderModuleFactory|BrowserTransferStateModule|ReflectiveInjector" src server.ts serverless.ts --glob "*.ts"

Known warnings and limits

  • The production initial bundle is 10.62 MB. It exceeds the 10 MB warning budget by 635.06 kB, but the build succeeds.
  • The builds still report CommonJS optimization warnings, unused Stripe source files, and one Autoprefixer warning for align-items: start.
  • No generated white-label Angular project exists in the current workspace, so that build remains a required manual release check.
  • The full lint backlog is separate from this migration. Earlier validation reported 92 existing template lint errors.

Release decision

Automated status: passed. Release after the critical browser checks pass for authentication, SSR transfer state, wallet masks, multiselect removal, Stripe, media, and one generated white-label project.