Angular hydration renders content twice

Question

I added "provideClientHydration()" to app.moude.ts providers array, and some of content is getting rendered twice (mostly text)

These are my dependencies from package.json:

"dependencies": {
    "@angular-devkit/core": "^16.2.8",
    "@angular-devkit/schematics": "^16.2.8",
    "@angular/animations": "^16.2.0",
    "@angular/cdk": "^16.2.8",
    "@angular/common": "^16.2.0",
    "@angular/compiler": "^16.2.0",
    "@angular/core": "https://output.circle-artifacts.com/output/job/9a9e6935-0c92-4744-aedb-a26d79e479d4/artifacts/0/angular/core-pr50199-adc2a499e1.tgz",
    "@angular/forms": "^16.2.0",
    "@angular/localize": "^16.2.8",
    "@angular/material": "^16.2.8",
    "@angular/platform-browser": "^16.2.0",
    "@angular/platform-browser-dynamic": "^16.2.0",
    "@angular/platform-server": "^16.2.0",
    "@angular/router": "^16.2.0",
    "@ng-bootstrap/ng-bootstrap": "15.1.1",
    "@nguniversal/express-engine": "^16.2.0",
    "@popperjs/core": "^2.11.8",
    "@types/express": "^4.17.14",
    "@types/jquery": "^3.5.14",
    "@videogular/ngx-videogular": "^8.0.0",
    "ajv": "^8.12.0",
    "angular-highcharts": "16.0.0",
    "angular-ng-autocomplete": "^2.0.12",
    "bootstrap": "^4.4.1",
    "browser-sync": "^2.29.3",
    "core-js": "^3.6.4",
    "d3": "^5.15.1",
    "domino": "^2.1.6",
    "domino-ext": "^2.1.4",
    "express": "^4.15.2",
    "highcharts": "11.1.0",
    "moment": "^2.29.4",
    "ngx-lightbox": "3.0.0",
    "ngx-mask": "^13.1.13",
    "redis": "^3.0.2",
    "rxjs": "~7.8.0",
    "rxjs-compat": "^6.5.5",
    "smoothscroll-polyfill": "^0.4.4",
    "swiper": "^5.0.1",
    "tree-kill": "^1.2.2",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.1.1",
    "@angular/cli": "^16.2.8",
    "@angular/compiler-cli": "^16.2.0",
    "@angular/language-service": "^16.2.8",
    "@nguniversal/builders": "^16.2.0",
    "@types/d3": "^5.7.2",
    "@types/d3-tip": "^3.5.5",
    "@types/express": "^4.17.0",
    "@types/highcharts": "^7.0.0",
    "@types/jasmine": "~4.3.0",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "^16.11.7",
    "codelyzer": "6.0.2",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.8.2",
    "tslint": "~6.1.0",
    "typescript": "~5.1.3"
  }

Not sure why is this happening it would be great if someone helps The hydration code is at the end of providers at app.module.ts

Answer 1

If you see a warning

NG0506: Angular hydration expected the ApplicationRef.isStable() to emit `true`, but it didn't happen within 10000ms. Angular hydration logic depends on the application becoming stable as a signal to complete hydration process. Find more at https://angular.io/errors/NG0506

you have probably some makrotasks running and there is no post-hydration cleanup.