Why .map operator doesn't working without .pipe (Angular + Angularfire2/auth)?

Question

I've implemented an Auth guard in one of the routes calling the authState method of AngularFireAuth.

I've seen plenty of example like the following to grant access:

return this.afAuth.authState.map(user => {
       if(isNullOrUndefined(user)){
        this.router.navigate(['auth/login']);
        return false;
       }else{
         return true;
       }
     })

But when I try to replicate it as is, I receive the following error : '...Property 'map' doesn't exist on type 'Observable'.

But when I include .pipe it works as expected :

return this.afAuth.authState.pipe(map((user) => {
       if(isNullOrUndefined(user)){
        this.router.navigate(['auth/login']);
        return false;
       }else{
         return true;
       }
     } ))

Maybe I should be satisfied it's working like this, but I can't understand why pipe is needed here. Anyone would have a few min to explain this to me ?

Many thanks ! Nanex

Answer 1

With the latest version of rxjs (6), the chained map operator has been removed. This is to increase the ability to tree-shake the library. Now you have to use the pipe operator.

You can read more here and here

Problems with the patched operators for dot-chaining are:

Any library that imports a patch operator will augment the Observable.prototype for all consumers of that library, creating blind dependencies. If the library removes their usage, they unknowingly break everyone else. With pipeables, you have to import the operators you need into each file you use them in.

Operators patched directly onto the prototype are not "tree-shakeable" by tools like rollup or webpack. Pipeable operators will be as they are just functions pulled in from modules directly.

Unused operators that are being imported in apps cannot be detected reliably by any sort of build tooling or lint rule. That means that you might import scan, but stop using it, and it's still being added to your output bundle. With pipeable operators, if you're not using it, a lint rule can pick it up for you.

Functional composition is awesome. Building your own custom operators becomes much, much easier, and now they work and look just like all other operators from rxjs. You don't need to extend Observable or override lift anymore.