Angular 20 to 21 upgrade, revised

Phase 0. Baseline and toolchain

• Commit the 8 modified files and the 12 untracked HTML plans in their own commit, or move the plans out of the repo. ng update checks git status --porcelain and ?? entries count. changed
• Find the Node version CodeBuild's nodejs: 20 runtime resolves to on the image the buildspecs use. Angular 21 needs >=20.19.0. If it is older, bump runtime-versions to 22 in all four buildspecs as part of this branch. changed
• Locally, either move to Node 24.15 or ignore the npm 12 warning. It does not affect CI, which installs its own npm 10.8.1.
• npm ci, then npm run build-dev. Record initial bundle sizes and the anyComponentStyle warnings.
• npm run prerender-all-qa and npm run serve:ssr. Confirm / and one creator profile render server-side.

Checkpoint: green build on Angular 20 with numbers written down and a known CI Node version.

Phase 1. Firebase SDK swap, still on Angular 20

• Apply the file changes above. npm install.
• Fresh profile: clear fc_token and fc_is_app from localStorage, allow notifications, log in. Expect POST pushNotification with a token and a test push arriving as a toast.
• Returning user: reload with the saved token. Expect no duplicate POST and the test push still arriving as a toast. changed
• Remote Config: iosPayButtonsConfig populated from Payment_Config on load. Repeat in a private window; expect a clean skip, not a console error. changed
• Logout hits PUT pushNotification with the token.
• Build dev and SSR again. No Firebase errors in the SSR log.

Checkpoint: commit replace @angular/fire with firebase sdk. The framework has not moved, so any breakage here is ours.

Phase 2. Framework

ng update @angular/core@21 @angular/cli@21 --force
ng update @angular/material@21 --force

• --force is expected. The CLI will list @cotufa82/ng-ivs, @khajegan/ngx-audio-player, and ngx-stripe as incompatible. If it names anything else, stop and look. changed
• The zone migration runs automatically. Confirm provideZoneChangeDetection() is in AppModule.providers.
• Review the diff in angular.json, tsconfig*.json, package.json. It should be small.

Checkpoint: commit angular 21 core, cli, material. The build may not be green yet.

Phase 3. Libraries

ng update @ngrx/store@21 --force
npm i primeng@21 ngx-bootstrap@21 @ng-select/ng-select@21 @ng-bootstrap/ng-bootstrap@20 \
  ngx-toastr@20 ngx-mask@21 ngx-owl-carousel-o@21 ngx-infinite-scroll@21 \
  @zxing/ngx-scanner@21 ngx-device-detector@11 \
  @fortawesome/angular-fontawesome@4 @fortawesome/fontawesome-svg-core@7 \
  @fortawesome/free-brands-svg-icons@7 @fortawesome/free-solid-svg-icons@7
npm i -D @angular-eslint/builder@21 @angular-eslint/eslint-plugin@21 \
  @angular-eslint/eslint-plugin-template@21 @angular-eslint/schematics@21 \
  @angular-eslint/template-parser@21

• Read each library's 21 changelog before fixing compile errors. ngx-bootstrap and primeng are the likeliest to have moved something.
• Font Awesome: confirm npm ls @fortawesome/fontawesome-svg-core shows one version.

Checkpoint: commit angular 21 third-party libraries.

Phase 4. Make it compile

• npm run build-dev. Fix in order: TypeScript 5.9 errors, host binding type errors, library API changes.
• Host bindings: fix the getter's return type first. typeCheckHostBindings: false only if a fix would change behaviour.
• npm run lint. Fix what @angular-eslint 21 flags or add targeted disables with a reason.

Checkpoint: commit fix compile and lint for angular 21. Dev build green.

Phase 5. The builds CI runs changed

The buildspecs run npm run $BUILD_ENV. Run the scripts that variable actually takes, not shorter stand-ins.

• npm run build-dev, npm run build-qa, npm run build-stage, npm run build-prod. Compare initial bundle and component style sizes with Phase 0.
• npm run prerender-all-qa and npm run prerender-all-staging. These run prefetch, static route generation, the prerender build, and sitemap generation. buildspec-s3.yml gates an npm audit on exactly these two names.
• npm run serve:ssr after the QA prerender. Hit /, a creator profile, a marketing page, a 404, /creators?key=x, and /username/?key=x. Read the server log, not just the status codes.
• npm run build-qa:sls and npm run build-stage:sls to prove the server builder still runs for the serverless target.
• npm run generate-white-label-qa for one white-label project, then build it. The generator writes angular.json projects; confirm 21 accepts what it emits.

Checkpoint: every listed script green, sizes within budget, SSR log clean. Push the branch and let CodeBuild run it on Node 20 / npm 10.8.1.

Phase 6. Hands-on smoke test

• Login, logout, OTP flow (uses deviceToken).
• Push token registration and an inbound toast, fresh and returning.
• Payment flow on an iOS user agent. Remote Config decides which buttons show.
• Router: deep link, back/forward, trailing-slash redirect, query params through the custom serializer, lazy module load.
• Material bottom sheets, CDK drag-and-drop ordering, CDK clipboard copy, the mobile breakpoint switch (cdk/layout in mobile-optimization.service.ts), promotional list scrolling (cdk/scrolling). changed
• ng-select dropdowns, ngx-bootstrap modals and datepicker, toasts, PrimeNG widgets, owl carousels, QR scanner, infinite scroll, masked inputs, the two Font Awesome icons.
• Audio player and IVS live stream, the two libraries running past their declared range.
• Service worker registration in a prod-config build.

Checkpoint: open the PR against feature/release-0.0.23/16-17-18-19-20 or the release branch the team prefers.