node modules error: Type parameter 'OT' has a circular constraint

Question

Getting error while run: ng serve

error:

Error: node_modules/@ngrx/effects/src/effect_creator.d.ts:12:43 - error TS2313: Type parameter 'OT' has a circular constraint.

12 }, DT extends DispatchType<C>, OT extends ObservableType<DT, OT>, R extends EffectResult<OT>>(source: () => R & ConditionallyDisallowActionCreator<DT, R>, config?: C): R & CreateEffectMetadata;

how to fix this error?

i tried with

npm install @ngrx/effects@latest @ngrx/store@latest @ngrx/store-devtools@latest rxjs@latest --save

but still got error while run ng serve in angular project! my angular version is: ^17.1.3 and node vesrion 18.19.0

Answer 1

UPDATE: This issue is permanently solved by the new official update of NGRX v17.2.0. Here is the original issue about this: https://github.com/ngrx/platform/issues/4275

I got exactly the same error, while I worked on the angular update on our project. Finally, it seems like the problem is with the latest Typescript v5.4.2. I just downgraded it to v5.2.2 and it works properly.

I will do a more detailed investigation later, I just would like to let you know to solve your blocker issue right now.

Answer 2

I have also seen this error today after upgrading all angular dependencies in my package.json and thought that it has some connection with NgRx library but then I also lowered typescript version from 5.4.2 to 5.3.3 and error is gone. My package.json looks like this now

"dependencies": {
"@angular/animations": "17.3.0",
"@angular/cdk": "17.3.0",
"@angular/common": "17.3.0",
"@angular/compiler": "17.3.0",
"@angular/core": "^17.3.0",
"@angular/forms": "17.3.0",
"@angular/material": "17.3.0",
"@angular/platform-browser": "17.3.0",
"@angular/platform-browser-dynamic": "17.3.0",
"@angular/router": "17.3.0",
"@capacitor/android": "5.7.3",
"@capacitor/cli": "5.7.3",
"@capacitor/core": "5.7.3",
"@ionic/angular": "7.8.0",
"@ngrx/effects": "17.1.1",
"@ngrx/store": "17.1.1",
"@ngrx/store-devtools": "17.1.1",
"@ngx-translate/core": "15.0.0",
"@ngx-translate/http-loader": "8.0.0",
"chart.js": "4.4.2",
"crypto-js": "4.2.0",
"ngx-device-detector": "7.0.0",
"rxjs": "7.8.1",
"tslib": "2.6.2",
"yarn": "^1.22.22",
"zone.js": "0.14.4"


 },
  "devDependencies": {
    "@angular-devkit/build-angular": "17.3.0",
    "@angular-eslint/builder": "17.3.0",
    "@angular-eslint/eslint-plugin": "17.3.0",
    "@angular-eslint/eslint-plugin-template": "17.3.0",
    "@angular-eslint/schematics": "17.3.0",
    "@angular-eslint/template-parser": "17.3.0",
    "@angular/cli": "^17.3.0",
    "@angular/compiler-cli": "17.3.0",
    "@angular/localize": "17.3.0",
    "@cypress/schematic": "2.5.1",
    "@ionic/angular-toolkit": "latest",
    "@ngrx/eslint-plugin": "17.0.1",
    "@types/crypto-js": "4.2.2",
    "@types/jasmine": "5.1.4",
    "@types/jest": "29.5.12",
    "@types/node": "20.11.29",
    "@typescript-eslint/eslint-plugin": "7.3.1",
    "@typescript-eslint/parser": "7.3.1",
    "chai": "5.1.0",
    "cypress": "13.7.0",
    "eslint": "8.57.0",
    "eslint-config-prettier": "9.1.0",
    "eslint-plugin-json-format": "2.0.1",
    "eslint-plugin-prettier": "5.1.3",
    "jasmine-core": "5.1.2",
    "karma": "6.4.3",
    "karma-chrome-launcher": "3.2.0",
    "karma-coverage": "2.2.1",
    "karma-jasmine": "5.1.0",
    "karma-jasmine-html-reporter": "2.1.0",
    "mocha": "10.3.0",
    "ng-packagr": "17.3.0",
    "prettier": "3.2.5",
    "prettier-plugin-organize-imports": "3.2.4",
    "start-server-and-test": "2.0.3",
    "typescript": "5.3.3",
    "wait-on": "7.2.0"