server.ts, serverless.ts- import 'zone.js/dist/zone-node';+ import 'zone.js/node';Dockerfile- FROM public.ecr.aws/docker/library/node:20-slim+ FROM public.ecr.aws/docker/library/node:20.19.6-slim.nvmrc (new)+ 20.19.6angular.json, every configuration+ "buildOptimizer": true

src/app/core/auth-guard.ts- import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';+ import { ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';- export class AuthGuard implements CanActivate {+ export class AuthGuard {src/app/app.module.ts- BrowserModule.withServerTransition({ appId: 'serverApp' }),+ BrowserModule,src/app/core/cache/api-cache.service.ts- import { Injectable } from '@angular/core';- import { TransferState, makeStateKey } from '@angular/platform-browser';+ import { Injectable, TransferState, makeStateKey } from '@angular/core';

Symptom

Build green after the bump. Deprecated APIs still live in five files.

Cause

ng update schematics do not rewrite every pattern, and deprecations compile without complaint.

Fix

A follow-up change:

• WhitelabelSiteOnlyGuard still implementing CanActivate
• TransferState still from platform-browser in three services
• withServerTransition still in AppModule

Rule from here: grep for the deprecated symbol after every ng update.

the follow-up, 5 files  src/app/app.module.ts                        | 2 +-  src/app/core/cache/api-cache.service.ts      | 3 +--  src/app/core/services/platform.service.ts    | 9 +++++++--  src/app/core/whitelabel-site-only.guard.ts   | 4 ++--  src/app/modules/shared/services/cache.service.ts | 3 +--

angular.json- "browserTarget": "TopFans:build:production"+ "buildTarget": "TopFans:build:production"- "builder": "@nguniversal/builders:ssr-dev-server",+ "builder": "@angular-devkit/build-angular:ssr-dev-server",- "builder": "@nguniversal/builders:prerender",+ "builder": "@angular-devkit/build-angular:prerender",- "guessRoutes": false+ "discoverRoutes": falsepackage.json- "@nguniversal/builders": "~16.2.0",- "@nguniversal/express-engine": "~16.2.0",+ "@angular/ssr": "~17.3.17",

Symptom

Seeking does nothing; audio.currentTime becomes NaN. Card, button and slider styles off.

Cause

Material 17's slider is the MDC one. change is a plain DOM event with no .value, the seek input is input[matSliderThumb], and track clicks fire input, not change. ngx-audio-player still reads event.value.

Fix

AudioSliderPatchDirective on the player host: capture change and input, resolve the value from the thumb input, define .value on the event, set audio.currentTime itself. Selectors rewritten in six global scss files and nine component files.

audio-slider-patch.directive.ts- this.el.nativeElement.addEventListener('change', this.changeListener, true);+ this.el.nativeElement.addEventListener('change', this.sliderListener, true);+ this.el.nativeElement.addEventListener('input', this.sliderListener, true); + private resolveSliderValue(e: Event): number {+   const target = e.target as HTMLElement | null;+   if (!target?.closest?.('mat-slider, .mat-mdc-slider')) return NaN;+   if (target instanceof HTMLInputElement && Number.isFinite(target.valueAsNumber)) {+     return target.valueAsNumber;+   }+   const thumbInput = this.el.nativeElement.querySelector(+     'input[matSliderThumb], input.mdc-slider__input, input[type="range"]'+   ) as HTMLInputElement | null;+   return thumbInput?.valueAsNumber ?? NaN;+ }

Symptom

Placeholder gone, selected label empty, duplicate options cannot be selected, parent control never marked touched or disabled.

Cause

PrimeNG 17 MultiSelect:

• [defaultLabel] is [placeholder]
• valuesAsString is label()
• Selection compares by reference

Fix

Own the state. Internal FormControl<string[]>; every option is identified by a required dataKey in its config (sk or name today), so identity is explicit and one to one. Callers replace the options array instead of mutating it, and generated features get a unique name. Sync back to the parent and markAsDirty; onBlur and onPanelHide mark touched; statusChanges mirrors disabled. Six passes to land on this.

custom-multiselect.component.html- [defaultLabel]="field?.customMultiselectConfig?.defaultLabel"+ [placeholder]="field?.customMultiselectConfig?.defaultLabel"- {{ multiSelect.valuesAsString }}+ {{ multiSelect.label() }}+ (onBlur)="markParentControlAsTouched()"+ (onPanelHide)="markParentControlAsTouched()"custom-multiselect.component.ts+ selectionControl = new FormControl<string[]>([], { nonNullable: true });+ private optionByInternalId = new Map<string, unknown>();+ private internalIdByOption = new Map<unknown, string>(); + private getOptionIdentity(option: unknown): string | null {+   const value = option[this.field?.customMultiselectConfig?.dataKey];+   return value == null || value === '' ? null : String(value);+ }formBuilderInterface.ts, every consumer- dataKey?: string;+ dataKey: string;+ dataKey: 'sk'create-plan.component.ts- this.featuresField.options.push(newFeature);+ this.featuresField.options = [...this.featuresField.options, newFeature];

angular.json- "builder": "@angular-devkit/build-angular:browser",+ "builder": "@angular-devkit/build-angular:browser-esbuild",- "vendorChunk": true,  "stylePreprocessorOptions": { "includePaths": [-   "sass"+   "sass",+   "."  ] }- { "input": "node_modules/flag-icon-css/css/flag-icons.min.css",-   "bundleName": "lazy-flag-icons", "inject": false }+ { "glob": "flag-icons.min.css", "input": "node_modules/flag-icon-css/css", "output": "/" },+ { "glob": "**/*", "input": "node_modules/flag-icon-css/flags", "output": "/flags" }lazy-css-loader.service.ts- link.href = `/${bundle}.css`;+ link.href = LAZY_CSS_LOADER_CONSTANTS.hrefs[bundle];

Symptom

Build green. App crashes on load: require is not defined.

Cause

Webpack rewrote require() to __webpack_require__. esbuild emits ESM and leaves it alone.

• TextEditorComponent: require('quill') in ngOnInit to keep Quill off the server
• CommonService: require('../../../core/auth.service') to dodge a cycle, AuthService to CommonService and back

Fix

Static imports. Quill unwrapped with ?.default ?? QuillDefault. CommonService imports AuthService normally, and the cycle itself is gone: CircleBackgroundIconComponent and InfoIconComponent only wanted isBrowser, so they inject PLATFORM_ID instead of the service.

text-editor.component.ts- let Quill: any;- Quill = require('quill');- require('quill-emoji');+ import QuillDefault from 'quill';+ import 'quill-emoji';+ const Quill: any = (QuillDefault as any)?.default ?? QuillDefault;common.service.ts- const { AuthService } = require('../../../core/auth.service');+ import { AuthService } from '@core/auth.service';info-icon.component.ts- import { CommonService } from 'src/app/modules/shared/services/common.service';- constructor(private cs: CommonService) {}- if (this.cs.isBrowser) {+ constructor(@Inject(PLATFORM_ID) private readonly platformId: object) {}+ if (isPlatformBrowser(this.platformId)) {

Symptom

Broadcasts fail to start. Found last, because nobody tested going live.

Cause

await import('amazon-ivs-web-broadcast') returns a different shape per bundler.

module.default = IVSBroadcastClientmodule.default = exports Under esbuild's CJS interop the class sits at module.default.default and the presets at module.default.*.

Fix

Detect the shape by a known preset, then unwrap .default ?? exports. Works under both bundlers.

active-livestream.component.ts- const IVSBroadcastClient = ivsModule?.default;+ const ivsExports = ivsModule?.default?.BASIC_FULL_HD_LANDSCAPE+   ? ivsModule.default+   : ivsModule;+ const IVSBroadcastClient = ivsExports?.default ?? ivsExports; - channelType === 'STANDARD' && ivsModule?.STANDARD_LANDSCAPE-   ? ivsModule.STANDARD_LANDSCAPE-   : ivsModule?.BASIC_FULL_HD_LANDSCAPE;+ channelType === 'STANDARD' && ivsExports?.STANDARD_LANDSCAPE+   ? ivsExports.STANDARD_LANDSCAPE+   : ivsExports?.BASIC_FULL_HD_LANDSCAPE;- this.bindIvsBroadcastNetworkListeners(ivsModule);+ this.bindIvsBroadcastNetworkListeners(ivsExports);

angular.json- "builder": "@angular-devkit/build-angular:browser-esbuild",+ "builder": "@angular-devkit/build-angular:application",- "outputPath": "dist/TopFans/browser",- "main": "src/main.ts",- "polyfills": "src/polyfills.ts",- "ngswConfigPath": "ngsw-config.json"+ "outputPath": "dist/TopFans",+ "browser": "src/main.ts",+ "server": "src/main.server.ts",+ "ssr": { "entry": "server.ts" },+ "polyfills": ["src/polyfills.ts"],+ "prerender": false,+ "externalDependencies": ["domino", "express", "compression", "helmet"]configurations.production- "serviceWorker": true,- "commonChunk": true,- "buildOptimizer": true,+ "serviceWorker": "ngsw-config.json",+ "prerender": { "routesFile": "prerender.routes.txt", "discoverRoutes": false }

server.ts- import domino from 'domino';- import { join } from 'path';+ import { installServerDom } from './src/server-dom';+ import { join } from 'node:path';+ import { fileURLToPath, pathToFileURL, URL as NodeURL } from 'node:url'; - const window = domino.createWindow(template);- (global as any).window = window;- (global as any).document = window.document;- (global as any).localStorage = window.localStorage;- (global as any).IntersectionObserver = class { observe() {} ... };+ installServerDom(template); - declare const __non_webpack_require__: NodeRequire;- if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {+ if (isMainModule(import.meta.url) || process.argv[1]?.includes('iisnode')) {src/main.server.ts+ import 'zone.js/node';+ import './server-dom';+ import '@angular/localize/init';+ export { AppServerModule as default } from './app/app.server.module';

error.interceptor.ts- import { BehaviorSubject, Observable, of, throwError } from 'rxjs';+ import { BehaviorSubject, EMPTY, Observable, of, throwError } from 'rxjs';+ if (!this.cs.isBrowser && err.status === Application.ZERO) {+   return EMPTY;+ }- return throwError(() => new Error('Unauthorized'));+ return EMPTY;pinned-horizontal-scroll-layout.component.ts- if (typeof window === 'undefined' || this.railMotionRafId !== null) {+ if (!this.isBrowser || this.railMotionRafId !== null) {- if (!wrapper) {+ if (!this.isBrowser || !wrapper || typeof wrapper.getBoundingClientRect !== 'function') {

Symptom

DOMPurify.sanitize is not a function on the server path.

Cause

AppComponent does import DOMPurify from 'dompurify'. The package is CJS with module.exports = DOMPurify; in the 18 server bundle the default import resolved to the namespace object. Same class of bug as Quill and IVS, one version later.

Fix

Namespace import, take .default ?? ns, give it a narrow local type. Third time a CJS default import bit us; it became a rule.

src/app/app.component.ts- import DOMPurify from 'dompurify';+ import * as DOMPurifyNs from 'dompurify'; + type DomPurifySanitize = {+   sanitize: (dirty: string, cfg: { ALLOWED_TAGS: string[]; ALLOWED_ATTR: string[] }) => string;+ }; + const DOMPurify: DomPurifySanitize =+   (DOMPurifyNs as { default?: DomPurifySanitize }).default ??+   (DOMPurifyNs as DomPurifySanitize);

buildspec-s3.yml (and three more)-       nodejs: 18+       nodejs: 20functions/package.json-   "node": "18"+   "node": "20"package.json-   "@types/node": "^18.19.120",+   "@types/node": "^20.19.6",tsconfig.json-       "es2018",+       "ES2022",ngsw-config.json+   "/polyfills.js",+   "/chunk-*.js"+   "/*.css",+   "!/chunk-*.js",+   "!/styles.*.css"

server.ts- import { CommonEngine } from '@angular/ssr';+ import { CommonEngine } from '@angular/ssr/node';+ import { environment } from './src/environments/environment'; + function getSsrAllowedHosts(): string[] {+   const hosts = new Set(['localhost', '127.0.0.1', '::1', '*.topfan.dev', '*.topfan.com']);+   for (const value of [environment.websiteURL, environment.webURL, environment.original_web_url]) {+     const host = hostnameFromUrl(value);+     if (host) hosts.add(host);+   }+   return [...hosts];+ } - const commonEngine = new CommonEngine();+ const commonEngine = new CommonEngine({ allowedHosts: getSsrAllowedHosts() });any declared component, directive or pipe  @Component({    selector: 'app-root',    templateUrl: './app.component.html',+   standalone: false  })

angular.json, styles- "node_modules/primeng/resources/themes/saga-blue/theme.css",- "node_modules/primeng/resources/primeng.min.css",- "node_modules/primeicons/primeicons.css",+ {+   "input": "node_modules/primeng/resources/themes/saga-blue/theme.css",+   "bundleName": "lazy-primeng-theme",+   "inject": false+ },+ { ..., "bundleName": "lazy-primeng", "inject": false },+ { ..., "bundleName": "lazy-primeicons", "inject": false },lazy-css-loader.constants.ts+ 'lazy-primeng-theme': '/lazy-primeng-theme.css',+ 'lazy-primeng': '/lazy-primeng.css',+ 'lazy-primeicons': '/lazy-primeicons.css',lazy-css-loader.service.ts+ const hrefNoSlash = href.startsWith('/') ? href.slice(1) : href;+ if (this.document.querySelector(`link[href="${href}"]`) ||+     this.document.querySelector(`link[href="${hrefNoSlash}"]`)) {+   return;+ }

app.module.ts+ import { providePrimeNG } from 'primeng/config';+ import * as LaraTheme from '@primeuix/themes/lara';  providers: [+   providePrimeNG({ theme: { preset: LaraTheme.default, options: { darkModeSelector: 'none' } } }),angular.json- { "input": ".../saga-blue/theme.css", "bundleName": "lazy-primeng-theme", ... },- { "input": ".../primeng.min.css", "bundleName": "lazy-primeng", ... },lazy-css-loader.service.ts-   this.load('lazy-primeng-theme', 'lazy-primeng', 'lazy-primeicons');+   this.load('lazy-primeicons');custom-multiselect.component.html- <span class="p-multiselect-token-label">{{ item[optionLabel] }}</span>- <TimesCircleIcon class="p-multiselect-token-icon"></TimesCircleIcon>+ <span class="p-multiselect-chip">{{ item[optionLabel] }}</span>+ <svg data-p-icon="times-circle" class="p-multiselect-chip-icon"></svg>

firebase.service.ts+ import { getApps, initializeApp } from 'firebase/app';+ import { getMessaging, getToken, onMessage, isSupported as isMessagingSupported } from 'firebase/messaging';+ import { getRemoteConfig, fetchAndActivate, getValue, isSupported as isRemoteConfigSupported } from 'firebase/remote-config'; + private async getMessagingInstance() {+   if (!this.platformService.isBrowser) return null;+   if (!(await isMessagingSupported())) return null;+   this.messaging = getMessaging(this.getFirebaseApp());+   return this.messaging;+ }registerWebToken+ const token = await getToken(messaging, { vapidKey: environment.firebaseVapidKey });+ this.setConfigToken(token, false);+ this.onMessage();getRemoteConfigValue+ this.zone.run(() => { this.iosPayButtonsConfig = parsed; });

shared.module.ts, and every feature module- ModalModule.forRoot(),- BsDropdownModule.forRoot(),+ ModalModule,+ BsDropdownModule,home.component.ts- dropdown.isOpen = false;+ dropdown.toggle();patches/ngx-intl-tel-input+15.0.0.patch- export const dropdownModuleForRoot = BsDropdownModule.forRoot();+ export const dropdownModuleForRoot = BsDropdownModule;

Symptom

The build failed on host listeners. Handlers that take no arguments were being passed $event.

Cause

21 type-checks host bindings even with strictTemplates off. 49 window:scroll and window:resize listeners were written that way, mostly infinite-scroll lists.

Fix

Drop the ['$event'] args list. Behaviour is the same. The listeners still fire. We did not turn typeCheckHostBindings off.

Symptom

Signup's country dropdown died with forRoot is not a function.

Cause

ngx-intl-tel-input 15 still calls BsDropdownModule.forRoot() inside its own module. ngx-bootstrap 21 removed that method.

Fix

A three-file patch that imports the module directly. If the phone flags ever look unstyled, the lazy vendor CSS for intl-tel-input did not load. That path did not change.

the one interop pattern+ import * as ModNs from 'some-cjs-package';+ const Mod = (ModNs as { default?: typeof ModNs }).default ?? ModNs; dynamic import of CJS+ const m = await import('some-cjs-package');+ const exportsObj = m?.default?.KNOWN_EXPORT ? m.default : m;+ const Client = exportsObj?.default ?? exportsObj; never- const { Thing } = require('../../path/to/thing');- const svc = this.injector.get(require('./svc').Svc);

platform guard- if (typeof window === 'undefined') return;+ constructor(@Inject(PLATFORM_ID) private readonly platformId: object) {}+ private get isBrowser() { return isPlatformBrowser(this.platformId); }+ if (!this.isBrowser) return; feature guard on top+ if (!this.isBrowser || typeof el.getBoundingClientRect !== 'function') return; server-side http failure- return throwError(() => new Error('Unauthorized'));+ return EMPTY;

angular.json, a new project's build target+ "builder": "@angular-devkit/build-angular:application",+ "options": {+   "outputPath": "dist/<project>",+   "browser": "src/main.ts",+   "server": "src/main.server.ts",+   "ssr": { "entry": "server.ts" },+   "polyfills": ["src/polyfills.ts", "@angular/localize/init"],+   "prerender": false,+   "externalDependencies": ["domino", "express", "compression", "helmet"]+ } - "vendorChunk": true,- "commonChunk": true,- "buildOptimizer": true,- "ngswConfigPath": "ngsw-config.json"

app.module.ts-   HttpClientModule,-   { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },-   { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },+   provideHttpClient(+     withFetch(),+     withInterceptors([errorInterceptor, authInterceptor])+   ),auth-int.interceptor.ts- @Injectable()- export class AuthInterceptor implements HttpInterceptor {-   constructor(private readonly authService: AuthService, ...) {}-   intercept(req: HttpRequest<any>, next: HttpHandler) {+ export const authInterceptor: HttpInterceptorFn = (req, next) => {+   const authService = inject(AuthService);+   const cs = inject(CommonService);    if (req.urlWithParams.includes('skipInterceptor=true')) {-     return next.handle(req);+     return next(req);    }

button.component.scss- @import '../../../assets/scss/var';- @import '../../../assets/scss/mixin';+ @use 'tools' as *;  .btn { color: $link_color; }src/assets/scss/_tools.scss+ @forward 'var';+ @forward 'config-var';+ @forward 'breakpoint-mixin';+ @forward 'mixin';angular.json, stylePreprocessorOptions  "includePaths": [    "sass",-   "."+   ".",+   "src/assets/scss"  ]ng serve, after+ 0 deprecation warnings from src/