Angular 6 & RxJS 6 Breaking Changes

Question

I've google the crap out of this and I can't find a solution.

I've been using code like this for some time now. http is the angular HttpClient.

 forgotPassword(email: string): Observable<ApiReturn> {
        const url = `${this.apiURL}/ForgotPassword`;
        const params = {
            email
        };
        return this.http
            .post<ApiReturn>(url, params, this.requestOptions)
            .pipe(catchError(e => this.handleError(e)));
    }

I updated to the latest Angular 6.x version and RxJS 6 (from 5.5). Now the code is complaining about the catchError:

Argument of type 'OperatorFunction' is not assignable to parameter of type 'OperatorFunction'. Types of parameters 'source' and 'source' are incompatible. Type 'Observable' is not assignable to type 'Observable'.

My HttpInterceptor is also now failing to compile.

import { Injectable } from '@angular/core';
import {
    HttpEvent,
    HttpInterceptor,
    HttpHandler,
    HttpRequest,
    HttpResponse
} from '@angular/common/http';
import { Log, Level } from 'ng2-logger/client';
import { Observable } from 'rxjs';
import { map, tap } from 'rxjs/operators';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    constructor() {
    }

    intercept(
        req: HttpRequest<any>,
        next: HttpHandler
    ): Observable<HttpEvent<any>> {
        // Get the auth header from the service.
        // const authHeader = this.global.authenticationToken;
        // Clone the request to add the new header.
        const authReq = req.clone({
            headers: req.headers
                .set('Access-Control-Allow-Origin', window.location.href)
        });
        // Pass on the cloned request instead of the original request.
        return next.handle(authReq);
    }
}

Error: [ts] Type 'import("c:/ProjDotNet/collegebowl-site/node_modules/@angular/core/node_modules/rxjs/internal/Observable").Observable>' is not assignable to type 'import("c:/ProjDotNet/collegebowl-site/node_modules/rxjs/internal/Observable").Observable>'. Types of property ' source' are incompatible.

Basically the same issue.

I gather I'm missing something basic in the pipe function but I can't figure it out or find an example that is doing what I am doing. Any help would be appreciated.

Answer 1

Like @meriton said, this is because you have multiple instance of rxjs in multiple node_modules. The best solution I've found is to add an alias into tsconfig.json to force the use of the same rxjs everywhere :

"compilerOptions": {
  "paths": {
      "rxjs": [
        "node_modules/rxjs"
      ],
      "rxjs/*": [
        "node_modules/rxjs/*"
      ]
   }
}

Answer 2

Look more closely at the error message. It says that

import("c:/ProjDotNet/collegebowl-site/node_modules/@angular/core/node_modules/rxjs/internal/Observable").Observable>

and

import("c:/ProjDotNet/collegebowl-site/node_modules/rxjs/internal/Observable").Observable>

are different types. That is, you actually have two different kinds of Observable that come from separate copies of RxJS that reside in different directories in your file system.

That is, your node_modules is in a very weird state. Running npm ls rxjs or yarn why rxjs might yield clues as to why npm / yarn thought it a good idea to install RxJS twice.