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:18.20.8-slim.nvmrc (new)+ 18.20.8angular.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 gets an id of identity:occurrence, so duplicates are distinct. Sync back to the parent and markAsDirty; onBlur and onPanelHide mark touched; statusChanges mirrors disabled. Three passes to get all of it.

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 internalIdsByOption = new Map<unknown, string[]>(); + const identity = this.getOptionIdentity(option) || `index:${index}`;+ const occurrence = identityOccurrences.get(identity) || 0;+ const internalId = `${identity}:${occurrence}`;

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);

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  })

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"