After the initial render with Server-Side Rendering (SSR), my Client-Side Rendering (CSR) is not functioning properly. I am using the NgModule approach, and my project was previously running on Angular 15. After upgrading to Angular 19 and integrating Angular Universal, this issue has surfaced. The problem persists even after following the recommended configurations for Angular Universal. I would greatly appreciate any insights or solutions that could resolve this issue, particularly regarding the CSR not initializing correctly post-SSR
I start with:
npx -p @angular/cli@19 ng add @angular/ssr
This created and updated required files. After this I installed below packagenpm install @angular/platform-server --legacy-peer-deps
Below are my scripts in package.json:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"dev:ssr": "ng run Angular-POMS:serve-ssr",
"serve:ssr": "node dist/Angular-POMS/server/main.js",
"build:ssr": "ng build && ng run Angular-POMS:server",
"prerender": "ng run Angular-POMS:prerender"
}
When I run npm run dev:ssr, then I get console values in terminal in first render and expecting same value be console in browser but nothing is happening in CSR side. CSR is totally not working
below is server terminal ouput
npm run dev:ssr
> Angular-POMS@1.0.0 dev:ssr
> ng run Angular-POMS:serve-ssr
****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.
DON'T USE IT FOR PRODUCTION!
****************************************************************************************
Components styles sourcemaps are not generated when styles optimization is enabled.
Components styles sourcemaps are not generated when styles optimization is enabled.
Server application bundle generation complete.
Initial chunk files | Names | Raw size
vendor.js | vendor | 7.75 MB |
main.js | main | 96.01 kB |
| Initial total | 7.84 MB
Lazy chunk files | Names | Raw size
937.js | views-quote-quote-module | 3.59 MB |
565.js | views-order-order-module | 3.56 MB |
929.js | xhr2 | 15.65 kB |
140.js | views-account-account-module | 9.82 kB |
Build at: 2025-04-09T12:00:35.020Z - Hash: b0584ff083856287 - Time: 146208ms
Browser application bundle generation complete.
⠋ Generating index html...9 rules skipped due to selector errors:
.table>>*>* -> Did not expect successive traversals.
.table-sm>>*>* -> Did not expect successive traversals.
.table-bordered>>* -> Did not expect successive traversals.
.table-bordered>>*>* -> Did not expect successive traversals.
.table-borderless>>*>* -> Did not expect successive traversals.
.form-floating>~label -> Did not expect successive traversals.
.btn-group>+.btn -> Did not expect successive traversals.
.btn-group>+.btn -> Did not expect successive traversals.
.btn-group-vertical>+.btn -> Did not expect successive traversals.
Index html generation complete.
Initial chunk files | Names | Raw size | Estimated transfer size
main.js | main | 64.96 kB | 16.96 kB
scripts.js | scripts | 10.82 kB | 3.07 kB
7 unchanged chunks
Build at: 2025-04-09T12:00:55.730Z - Hash: 7128f687559f95fb - Time: 110769ms
Warning: D:GithubAngular.POMSAngular.POMSsrcappServicescryptocrypto.service.ts depends on 'crypto-js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies
Warning: D:GithubAngular.POMSAngular.POMSsrcappviewsorderupload-orderupload-order.component.ts depends on 'csvtojson'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies
Compiled successfully.
** Angular Universal Live Development Server is listening on http://localhost:4200, open your browser on http://localhost:4200 **
(node:596) [DEP0060] DeprecationWarning: The `util._extend` API is deprecated. Please use Object.assign() instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
isPlatformBrowser server
but nothing in the browser console