[SOLVED] Ngrx: Property '[Symbol.observable]' is missing in type 'Store<boolean>' error

Ngrx: Property '[Symbol.observable]' is missing in type 'Store<boolean>' error

I'm using NGRX v4.1.1 in an Angular v5 app (with "strictNullChecks": true, though it doesn't appear to matter).

I'm seeing an error with the store. Given the following:

showLists: Observable<boolean>;

constructor(private store: Store<State>) {}

ngOnInit() {
  this.showLists = this.store.select('contactsFeature', 'contactsReducer', 'showListsPanel');
}

Typescript is raising an error on this.store.select():

Type 'Store<boolean>' cannot be converted to type 'Observable<boolean>'.
Property '[Symbol.observable]' is missing in type 'Store<boolean>'.

This method of selecting a slice of the store (using .select) and assigning it to a variable of type Observable<> is officially outlined in the documentation (I actually see they've updated the documentation to the ngrx v5 recommended API, but v5 hasn't been released yet, so I've linked to the next most recent version of the docs).

The problem is that store.select() has a return type of Store<> which is incompatible with Observable<>.

This is the 'official' method of interacting with the Store however (I think). So I'm wondering what's going wrong. If I disable strictNullChecks, I still run into the error. The error has popped up in a project I'm coming back to after a month away, and I can't determine when, exactly, it started (or why, obviously).

Any suggestions are appreciated :)

PS: Typescript will not let me cast the return of .select() to an observable.

Update

Updating npm provided me with a better error message. It looks like either rxjs's interface has been updated, or perhaps ngrx's has.

ERROR in apps/coordination/src/app/contacts/contacts-tools.component.ts(21,5): error TS2322: Type 'Store<boolean>' is not assignable to type 'Observable<boolean>'.
  Types of property 'subscribe' are incompatible.
    Type '{ (observer?: NextObserver<boolean> | ErrorObserver<boolean> | CompletionObserver<boolean> | unde...' is not assignable to type '{ (observer: Observer<boolean>): Subscription; (onNext: (value: boolean) => void, onError?: ((err...'.
      Types of parameters 'observer' and 'observer' are incompatible.
        Type 'Observer<boolean>' is not assignable to type 'NextObserver<boolean> | ErrorObserver<boolean> | CompletionObserver<boolean> | undefined'.
          Type 'Observer<boolean>' is not assignable to type 'CompletionObserver<boolean>'.
            Types of property 'complete' are incompatible.
              Type '(() => void) | undefined' is not assignable to type '() => void'.
                Type 'undefined' is not assignable to type '() => void'.

Solution

I'm using vscode with automatic module imports. i.e. if I make use of a class from an npm module, vscode will automatically add the proper import statement to the top of the file.

Apparently one of my npm modules (not rxjs) defined its own Observable, and vscode had automatically imported that, non-rxjs observable. This non-rxjs observable was causing the type problem.