In Angular rxjs when should I use `pipe` vs `map`

Solution 1:

The "new" way, using pipe, is called Lettable Operators Pipeable Operators. The "old" way, where you chain operators, is called using "patch operators".

Starting in version 5.5 we have shipped "pipeable operators", which can be accessed in rxjs/operators (notice the pluralized "operators"). These are meant to be a better approach for pulling in just the operators you need than the "patch" operators found in rxjs/add/operator/*.

There were some problems with the patch operators. They can also ensure that your produced bundle from your code is smaller. There are other advantages as well, see the documentation which fairly well covers it.

To answer your other question though your 2 code samples are functionally equivalent. Also you should use Pipeable Operators over Patch Operators whenever possible.

From the documentation (for completeness)

Problems with the patched operators for dot-chaining are:

1. 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.
2. 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.
3. 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.
4. 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.