The application moved from Angular 15.2 to 16.2 as a controlled first step. Framework packages, build tools, SSR, and Angular-dependent UI libraries now agree on one compatible version set. The final Angular update-guide cleanup is also applied.
The change keeps the existing NgModule application and Universal SSR architecture. It updates the version contract around them and applies the compatibility edits required by Angular 16.
No product feature or route was intentionally redesigned. The work changes framework contracts and build behavior while preserving the application's current structure.
| Package group | Before | After | Reason |
|---|---|---|---|
| Angular framework | 15.2.10 | 16.2.12 | Moves core, compiler, forms, router, browser, server, service worker, and related packages as one synchronized set. |
| CLI and build tools | 15.2.11 | 16.2.16 | Keeps workspace builders and migrations compatible with Angular 16. |
| Material and CDK | 15.2.9 | 16.2.14 | Matches Angular 16 and supplies the current component and drag-drop APIs. |
| TypeScript | 4.9.5 | 5.1.6 | Uses the newest TypeScript line accepted by Angular 16.2. |
| RxJS | 7.5.7 | 7.8.x | Satisfies upgraded library peers, including the Angular 16 audio player. |
| Zone.js | 0.11.x | 0.13.3 | Matches Angular 16 and changes the supported Node entry point used by SSR. |
| Node.js | 20 in Docker | 18.20.8 | Angular 16 officially supports Node 18, while Node 20 is outside its documented build range. The same version is recorded in .nvmrc. |
Material alone was not enough. Packages with Angular peer dependencies also had to move to compatible releases.
| Area | Aligned packages |
|---|---|
| State and UI | @ngrx/store 16.3, primeng 16.9, ngx-bootstrap 11, @ng-bootstrap/ng-bootstrap 15, @ng-select/ng-select 11 |
| Forms and input | ngx-mask 16, ngx-intl-tel-input 15, ng-multiselect-dropdown 1.0, ngx-material-timepicker 13 |
| Media and display | ngx-audio-player 16, ngx-owl-carousel-o 16, ngx-infinite-scroll 16, ngx-device-detector 6 |
| Payments and icons | ngx-stripe 16, @stripe/stripe-js 3, @fortawesome/angular-fontawesome 0.13 |
| New explicit runtime dependencies | domino 2.1.8 for SSR and luxon 3.7 for the upgraded time picker |
Angular 15.2 deprecated class interfaces such as CanActivate and CanDeactivate. The migration removes those imports and implements clauses. Existing canActivate and canDeactivate methods remain, so route behavior stays structurally compatible.
entryComponents was deleted from SharedModule. Ivy discovers dynamically created components without that NgModule list.
zone.js/dist/zone-node became zone.js/node in both server.ts and serverless.ts. The old deep import is not exported by Zone.js 0.13.
The custom multiselect calls removeOption(item, event) instead of the removed removeChip(item, event) method.
The wallet module imports standalone mask directive and pipe classes, then registers provideNgxMask(). This replaces the older NgxMaskModule.forRoot() pattern.
ngx-drag-and-drop-lists and its module import were removed. Messages already uses Angular CDK drag-drop, and Angular 16 no longer runs the old compatibility compiler.
TransferState and makeStateKey now come from @angular/core in the platform service and both cache services. Angular 16 moved these public APIs out of @angular/platform-browser.
BrowserModule.withServerTransition({ appId: 'serverApp' }) became BrowserModule. Each white-label site is a separate build, so this application does not need an APP_ID to distinguish multiple Angular applications on one page.
WhitelabelSiteOnlyGuard no longer imports or implements the deprecated CanActivate interface. Its canActivate() method and routing behavior are unchanged.
The two white-label generated constant files only received new generation timestamps. Their exported data did not change.
angular.json now records explicit buildOptimizer values for server and serverless configurations. Optimized targets use true; development uses false.tsconfig.json points typeRoots to node_modules/@types, allowing TypeScript 5.1 to resolve Node declarations during browser and SSR compilation..eslintrc.json, so the lint command now reaches source validation.package-lock.json was regenerated to lock the Angular 16-compatible dependency tree.nvm use npm install npm run build-dev
npm run build-dev still depends on a local src/environments/environment.dev.ts. That file was absent during validation, so the checked-in development and production configurations were used directly.
| Check | Result | What it proves |
|---|---|---|
| Dependency tree | Passed | npm ls --depth=0 found no missing or invalid root packages. |
| Development browser build | Passed | Re-run on 11 September after the final import, BrowserModule, and route-guard cleanup. |
| Production browser build | Passed | Optimization, index generation, hashing, and service-worker generation complete after the final cleanup. |
| Development SSR build | Passed | Universal, Zone.js, Domino, server entry points, and server-side lazy chunks compile after the final cleanup. |
| Changed TypeScript files | Passed | The files touched by the migration pass ESLint with the repository's required 10 GB heap. |
| Whole-project lint | Backlog | Lint now runs and reports 92 existing template errors, mainly loose equality and negated async-pipe expressions. |
| White-label builds | Unavailable | The project list contained only TopFans; no generated white-label project existed to compile. |
The latest optimized initial bundle is 10.62 MB, which is 635.06 kB above the configured 10 MB warning threshold. The build still succeeds. CommonJS dependency, unused Stripe source, and one CSS compatibility warning also remain.