Ngx-bootstrap: Class 'MiniStore<T>' incorrectly extends base class 'Observable<T>

[FabienDehopre]

I just update to version 1.8.0 from 1.7.1 and when I compile my app I got a compilation error:

ERROR in /mnt/c/Users/f.dehopre/devs/Portal/node_modules/ngx-bootstrap/mini-ngrx/store.class.d.ts (8,22): Class 'MiniStore<T>' incorrectly extends base class 'Observable<T>'.
  Types of property 'lift' are incompatible.
    Type '<R>(operator: Operator<T, R>) => MiniStore<R>' is not assignable to type '<R>(operator: Operator<T, R>) => Observable<R>'.
      Type 'MiniStore<R>' is not assignable to type 'Observable<R>'.
        Types of property 'lift' are incompatible.
          Type '<R>(operator: Operator<R, R>) => MiniStore<R>' is not assignable to type '<R>(operator: Operator<R, R>) => Observable<R>'.
            Type 'MiniStore<R>' is not assignable to type 'Observable<R>'.
              Types of property 'lift' are incompatible.
                Type '<R>(operator: Operator<R, R>) => MiniStore<R>' is not assignable to type '<R>(operator: Operator<R, R>) => Observable<R>'.
                  Type 'MiniStore<R>' is not assignable to type 'Observable<R>'.
                    Types of property 'select' are incompatible.
                      Type '<R>(pathOrMapFn: (state: R) => R) => Observable<R>' is not assignable to type 'SelectSignature<R>'.
                        Types of parameters 'pathOrMapFn' and 'paths' are incompatible.
                          Type 'string' is not assignable to type '(state: R) => any'.

ERROR in /mnt/c/Users/f.dehopre/devs/Portal/node_modules/ngx-bootstrap/mini-ngrx/store.class.d.ts (12,5): Class 'Observable<T>' defines instance member property 'select', but extended class 'MiniStore<T>' defines it as instance member function.

[ipassynk]

I think this is related to https://github.com/ReactiveX/rxjs/issues/2539

[valorkin]

yes @ipassynk you are correct,
you need to upgrade rxjs to one with fix

[FabienDehopre]

I'm already on the latest version of rxjs (5.4.2).
I tried the latest version of ngx-bootstrap (1.8.1) and I still have the same issue when compiling.
Any idea of how I can fix this issue?

[valorkin]

Typescript version?

[costaprofunda]

same error for me
"typescript": "2.3.4"

[ipassynk]

Looks like people still struggle with this issue. Just after I opened a defect I found a solution in https://github.com/ReactiveX/rxjs/issues/2539, I added "skipLibCheck": true to tsconfig.json to overcome this error.

[costaprofunda]

tried to implement different solutions, incl. "skipLibCheck": true, --noStrictGenericChecks, Module Augmentation, but no results still
only editing ngx-bootstrap/mini-ngrx/store.class.d.ts caused successful compilation, but there must be a better solution I guess

import { SelectSignature } from '@ngrx/core';

select: SelectSignature<T>;
lift<R>(operator: Operator<T, R>): Observable<R>;

[valorkin]

Can someone reproduce this issue with fresh ng cli new project ?

[FabienDehopre]

@valorkin My typescript version is 2.4.2

[Sparker73]

I'm running into the same issue.

Two main things happened in my environment, just to give some info. First, I have upgraded my Angular CLI to latest and Angular 2 packages to Angular 4. At first it didn't work but, with patience, I was going error by error and solving one by one and most of them were of two classes, typescript legacy programming syntax and also many many packages were old, so basically correcting syntax and updating old packages as well as removing incompatible ones and finding new ones to replace the functionality was enough.

Ok until there. Everything was working fine with my ng2-bootstrap package and even AOT compilation worked just great.

Today I had the NO-SO-GREAT idea of uninstalling ng2-bootstrap and installed the new ngx-bootstrap. Everywhere in the web says the old package was renamed to ngx-bootstrap but I don't think that the only change was a "package rename". I'm just offering my bad experience as a reference to this issue.

If there is something I can do to sole it it would be great, I don't know if going back to the old repo (ng2-bootstrap) would work again but I'll try. Thanks for reading.

My setup:

@angular/cli: 1.3.0
node: 7.2.1
os: darwin x64
@angular/animations: 4.3.4
@angular/common: 4.3.4
@angular/compiler: 4.3.4
@angular/core: 4.3.4
@angular/forms: 4.3.4
@angular/http: 4.3.4
@angular/platform-browser: 4.3.4
@angular/platform-browser-dynamic: 4.3.4
@angular/platform-server: 4.3.4
@angular/router: 4.3.4
@angular/cli: 1.3.0
@angular/compiler-cli: 4.3.4

rxjs: ^5.4.3
typescript: 2.3.4

Installed latest ngx-bootstrap 1.8.1
Nothing makes the error go away.

[valorkin]

"rxjs": "5.4.3",
"typescript": "2.4.2",
no issues, please try
@Sparker73

[FabienDehopre]

I can't update rxjs to 5.4.3 because I use the @ngrx/platform library and updating rxjs to 5.4.3 causes a lot of typescript errors.
In any case, even with rxjs 5.4.2 and typescript 2.4.2, it works when I don't use the typeahead module.

[valorkin]

ok, I will add peer deps to 5.4.2 and 2.4.2
to avoid confusion in future
thanks

[blaur]

I'm still seeing this error with rxjs 5.4.3 and typescript 2.4.2.

Any suggestions on how to proceed?

Everything works with 2.0.0.beta-2 and typescript 2.3.2 but I need to upgrade to get the BsDatePickerModule.

[valorkin]

@blaur please provide a repo to reproduce, cuz I can't reproduce

[hazmah0]

@valorkin here is a minimal repo generated with angular-cli: https://github.com/hazmah0/ngx-bootstrap-2261

I've added 2 dependencies "ngrx/core" and "ngx-bootstrap". The only other modifications I've made is on app.module.ts where I have imported an operator at the beginning of the file and imported a module from "ngx-bootstrap".

[valorkin]

Great, thanks!

[hazmah0]

@valorkin Have you had any time to track down the error in the repo I linked before?

[timdang]

Also wanted to say I'm experiencing this issue as well with the following config:
"@angular/core": "5.0.0",
"typescript": "2.6.1",
"rxjs": "5.5.2",

Thanks!

[valorkin]

skipLibCheck: true, in tsconfig should help in the meantime

[timdang]

Awesome. Thank you for the prompt reply!

[hk-skit]

Hey Guys,

I want to upgrade ngx-bootstrap. I am still facing this issue, even after trying all the possible solutions. Here's my dependencies:

"dependencies": {
    "@angular/animations": "4.1.3",
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@angular/platform-server": "4.1.3",
    "@angular/router": "4.1.3",
    "@angularclass/conventions-loader": "1.0.2",
    "@angularclass/hmr": "1.2.2",
    "@angularclass/hmr-loader": "3.0.2",
    "@ngrx/core": "1.2.0",
    "@ngrx/effects": "2.0.3",
    "@ngrx/router-store": "1.2.6",
    "@ngrx/store": "2.2.2",
    "@ngrx/store-devtools": "3.2.4",
    "@ngrx/store-log-monitor": "3.0.2",
    "@types/lodash": "4.14.64",
    "@types/nouislider": "9.0.0",
    "ag-grid": "9.1.0",
    "ag-grid-angular": "9.1.0",
    "ag-grid-enterprise": "9.1.0",
    "angular2-google-chart": "2.2.3",
    "bootstrap": "3.3.7",
    "chart.js": "2.6.0",
    "chart.piecelabel.js": "0.6.0",
    "core-js": "2.4.1",
    "font-awesome": "4.7.0",
    "http-server": "0.9.0",
    "ie-shim": "0.1.0",
    "jasmine-core": "2.5.2",
    "lodash": "4.17.4",
    "lunr": "2.1.4",
    "moment": "2.18.1",
    "moment-range": "3.0.3",
    "moment-timezone": "0.5.11",
    "ng2-datepicker": "1.8.3",
    "ng2-tag-input": "^1.4.1",
    "ng2-validation": "4.2.0",
    "ngrx-store-freeze": "0.1.9",
    "ngrx-store-logger": "0.1.7",
    "ngx-bootstrap": "1.9.3",
    "ngx-infinite-scroll": "0.5.1",
    "ngx-popover": "0.0.16",
    "nouislider": "9.2.0",
    "reflect-metadata": "0.1.10",
    "rxjs": "5.4.1",
    "zone.js": "0.8.10"
  },
  "devDependencies": {
    "@angular/compiler-cli": "4.1.3",
    "@types/hammerjs": "2.0.34",
    "@types/jasmine": "2.5.45",
    "@types/lunr": "2.1.3",
    "@types/moment": "2.13.0",
    "@types/moment-range": "3.0.3",
    "@types/moment-timezone": "0.2.34",
    "@types/node": "7.0.13",
    "@types/selenium-webdriver": "2.53.39",
    "@types/source-map": "0.5.0",
    "@types/uglify-js": "2.6.28",
    "@types/webpack": "2.2.15",
    "add-asset-html-webpack-plugin": "1.0.2",
    "angular2-perfect-scrollbar": "^2.0.6",
    "angular2-template-loader": "0.6.2",
    "assets-webpack-plugin": "3.5.1",
    "awesome-typescript-loader": "3.4.1",
    "codelyzer": "2.1.1",
    "copy-webpack-plugin": "4.0.1",
    "cross-env": "5.1.1",
    "css-loader": "0.28.0",
    "exports-loader": "0.6.4",
    "expose-loader": "0.7.3",
    "extract-text-webpack-plugin": "2.1.0",
    "file-loader": "0.11.1",
    "find-root": "1.0.0",
    "gh-pages": "0.12.0",
    "grunt": "1.0.1",
    "gulp": "3.9.1",
    "gulp-s3-upload": "1.6.4",
    "html-webpack-plugin": "2.28.0",
    "imports-loader": "0.7.1",
    "inline-manifest-webpack-plugin": "3.0.1",
    "istanbul-instrumenter-loader": "2.0.0",
    "jasmine-core": "2.5.2",
    "json-loader": "0.5.4",
    "karma": "1.6.0",
    "karma-chrome-launcher": "2.0.0",
    "karma-coverage": "1.1.1",
    "karma-jasmine": "1.1.0",
    "karma-mocha-reporter": "2.2.3",
    "karma-remap-coverage": "0.1.4",
    "karma-sourcemap-loader": "0.3.7",
    "karma-webpack": "2.0.3",
    "ng-router-loader": "2.1.0",
    "ngc-webpack": "2.0.0",
    "node-sass": "4.5.2",
    "npm-run-all": "4.0.2",
    "optimize-js-plugin": "0.0.4",
    "parse5": "3.0.2",
    "protractor": "5.1.1",
    "raw-loader": "0.5.1",
    "rimraf": "2.6.1",
    "sass-loader": "6.0.3",
    "script-ext-html-webpack-plugin": "1.7.1",
    "source-map-loader": "0.2.1",
    "string-replace-loader": "1.2.0",
    "style-loader": "0.16.0",
    "to-string-loader": "1.1.5",
    "ts-node": "3.0.2",
    "tslib": "1.6.1",
    "tslint": "4.5.1",
    "tslint-loader": "3.5.2",
    "typedoc": "0.5.10",
    "typescript": "2.3.4",
    "url-loader": "0.5.8",
    "webpack": "2.4.1",
    "webpack-dev-middleware": "1.10.1",
    "webpack-dev-server": "2.4.2",
    "webpack-dll-bundles-plugin": "1.0.0-beta.5",
    "webpack-merge": "4.1.0"
  }

I tried using skipLibCheck but no luck. Can anyone please help me on this? Thanks.

[valorkin]

Typescript 2.4.2 rxjs 5.4.3

[hk-skit]

Thank you for reply. Even after changing the version I am getting the same error but this time it has introduced other errors related with ngrx/store and some other plugin. Please find the log below regarding ngx-bootstrap

[at-loader] ./node_modules/ngx-bootstrap/mini-ngrx/store.class.d.ts:8:22
    TS2415: Class 'MiniStore<T>' incorrectly extends base class 'Observable<T>'.
  Types of property 'lift' are incompatible.
    Type '<R>(operator: Operator<T, R>) => MiniStore<R>' is not assignable to type '<R>(operator: Operator<T, R>) => Observable<R>'.
      Type 'MiniStore<R>' is not assignable to type 'Observable<R>'.
        Types of property 'lift' are incompatible.
          Type '<R>(operator: Operator<R, R>) => MiniStore<R>' is not assignable to type '<R>(operator: Operator<R, R>) => Observable<R>'.
            Type 'MiniStore<R>' is not assignable to type 'Observable<R>'.
              Types of property 'lift' are incompatible.
                Type '<R>(operator: Operator<R, R>) => MiniStore<R>' is not assignable to type '<R>(operator: Operator<R, R>) => Observable<R>'.
                  Type 'MiniStore<R>' is not assignable to type 'Observable<R>'.
                    Types of property 'select' are incompatible.
                      Type '<R>(pathOrMapFn: (state: R) => R) => Observable<R>' is not assignable to type 'SelectSignature<R>'.
                        Types of parameters 'pathOrMapFn' and 'paths' are incompatible.
                          Type 'string' is not assignable to type '(state: R) => any'.

[Pritoj]

Same issue as @hk-skit.
First tried the skipLibCheck: true but didn't work.

ERROR in node_modules/@ngrx/store/src/store.d.ts(13,5): error TS2425: Class 'Observable<T>' defines instance member property 'select', but extended class 'Store<T>' defines it as instance member function.
node_modules/ngx-bootstrap/mini-ngrx/store.class.d.ts(8,22): error TS2415: Class 'MiniStore<T>' incorrectly extends base class 'Observable<T>'.
  Types of property 'lift' are incompatible.
    Type '<R>(operator: Operator<T, R>) => MiniStore<R>' is not assignable to type '<R>(operator: Operator<T, R>) => Observable<R>'.
      Type 'MiniStore<R>' is not assignable to type 'Observable<R>'.
        Types of property 'lift' are incompatible.
          Type '<R>(operator: Operator<R, R>) => MiniStore<R>' is not assignable to type '<R>(operator: Operator<R, R>) => Observable<R>'.
            Type 'MiniStore<R>' is not assignable to type 'Observable<R>'.
              Types of property 'lift' are incompatible.
                Type '<R>(operator: Operator<R, R>) => MiniStore<R>' is not assignable to type '<R>(operator: Operator<R, R>) => Observable<R>'.
                  Type 'MiniStore<R>' is not assignable to type 'Observable<R>'.
                    Types of property 'select' are incompatible.
                      Type '<R>(pathOrMapFn: (state: R) => R) => Observable<R>' is not assignable to type 'SelectSignature<R>'.
                        Types of parameters 'pathOrMapFn' and 'paths' are incompatible.
                          Type 'string' is not assignable to type '(state: R) => any'.
node_modules/ngx-bootstrap/mini-ngrx/store.class.d.ts(12,5): error TS2425: Class 'Observable<T>' defines instance member property 'select', but extended class 'MiniStore<T>' defines it as instance member function.

    "typescript": "~2.4.2",
    "@ngrx/effects": "4.1.1",
    "@angular/core": "^5.0.0",
    "rxjs": "^5.5.2",

Please help.

[constfun]

I've modified store.class.d.ts like so and the project compiles. I suspect the definition files are generated somehow? I don't see them in the repository.

...
import { SelectSignature } from '@ngrx/core/operator/select';
...
    select: SelectSignature<T>;
...

Also see #2366

[zerdan-mohamed]

@constfun, Modify node_modules is not a good idea..