Rxjs 'Observable<ArrayBuffer>' is not assignable to type 'Observable<any>'

[georemo]

I would like to initialize rxjs/webSocket via jwt. So I have a http observable this.svHttp.jwtAuth$(userName, password) that fetches the jwt and the result is consumed by a another method this.connectSecure(authResponse.token) responsible for initializing rxjs/webSocket set up. I am using angular 12.2.0,"rxjs": "~6.6.0","rxjs-websockets": "^8.0.1","tslib": "^2.3.0".
The code below works in a regular angular project but fails in angular library project with the following message:

(alias) mergeMap<any, Observable<unknown>>(project: (value: any, index: number) => Observable<unknown>, concurrent?: number | undefined): OperatorFunction<any, unknown> (+2 overloads)
    import mergeMap
    Argument of type 
    'OperatorFunction<any, unknown>' is not assignable to parameter of type 
    'OperatorFunction<ArrayBuffer, unknown>'.
      Types of parameters 'source' and 'source' are incompatible.
        Type 'Observable<ArrayBuffer>' is not assignable to type 'Observable<any>'.
          The types of 'source.operator.call' are incompatible between these types.
            Type '(subscriber: import("<home-dir>/cd-ui-lib/node_modules/rxjs/internal/Subscriber").
            Subscriber<any>, source: any) => import("<home-dir>/cd-ui-lib/node_modules/rxjs/internal/types").
            TeardownLogic' is not assignable to type '(subscriber: import("<home-dir>/cd-ui-lib/projects/core/node_modules/rxjs/internal/Subscriber").Subscriber<any>, source: any) => import("<home-dir>/cd-ui-lib/projects/core/node_modules/rxjs/internal/types").TeardownLogic'.
              Types of parameters 'subscriber' and 'subscriber' are incompatible.
                Type 'import("<home-dir>/cd-ui-lib/projects/core/node_modules/rxjs/internal/Subscriber").Subscriber<any>' is not assignable to type 'import("<home-dir>/cd-ui-lib/node_modules/rxjs/internal/Subscriber").Subscriber<any>'.
                  Property 'isStopped' is protected but type 'Subscriber<T>' is not a class derived from 'Subscriber<T>'.ts(2345)

The offending code is highlighted in the block:

mergeMap((authResponse: any) => {
                        console.log('init()/authResponse:', authResponse);
                        this.jwtToken = authResponse.token;
                        return this.connectSecure(authResponse.token)
                    }) 

The full method reads:

init(userName: string, password: string) {
        return this.svHttp.jwtAuth$(userName, password)
            .pipe(
                mergeMap((authResponse: any) => {
                    console.log('init()/authResponse:', authResponse);
                    this.jwtToken = authResponse.token;
                    return this.connectSecure(authResponse.token)
                })
            );
    }

NB: I had shared this question at stackoverflow 2 days ago but have not received any answer. The link is here

[JoostK]

The error indicates that there's two occurrences of rxjs in different node_modules trees:

Type 'import("<home-dir>/cd-ui-lib/projects/core/node_modules/rxjs/internal/Subscriber").Subscriber<any>' is not assignable to type 'import("<home-dir>/cd-ui-lib/node_modules/rxjs/internal/Subscriber").Subscriber<any>'.

TypeScript has a strategy to deduplicate these files but only if the package versions are identical, as determined by reading the version field from both node_modules/rxjs/package.json files. In your case the versions are likely askew, causing TypeScript not to deduplicate the source files which subsequently causes the types not to be assignable.