Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 5 -> Angular 6 Rxjs .map() to .pipe(map())

I have an Angular 5 project which has many modules and hundreds of components. Since RxJs 6 you have to use

someObservable.pipe(map(...))

instead of

someObservable.map(...)

I want to migrate this project from Angular 5 to 6, but dont want to change every occurrence of .map() by hand.

The Angular update side suggests

rxjs-5-to-6-migrate -p src/tsconfig.app.json

for migrating to rxjs 6, but I am afraid that this can't change my code.

Any suggestions on how to save time and change from .map() to .pipe(map()) automatically?

like image 442
lynxSven Avatar asked May 11 '18 12:05

lynxSven


People also ask

What is .pipe in RxJS?

pipe() can be called on one or more functions, each of which can take one argument ("UnaryFunction") and uses it to return a value. It returns a function that takes one argument, passes it to the first UnaryFunction, and then passes the result to the next one, passes that result to the next one, and so on.

What is RxJS map in Angular?

RxJS map() operator is a transformation operator used to transform the items emitted by an Observable by applying a function to each item. It applies a given project function to each value emitted by the source Observable and then emits the resulting values as an Observable.

What does map in RxJS do?

The map operator in RxJS transforms values emitted from the source observable based on a provided projection function. This is similar to Array. map , except we are operating on each value emitted from an observable as it occurs rather than each value contained within an array.

What does .pipe do in Angular?

Use pipes to transform strings, currency amounts, dates, and other data for display. Pipes are simple functions to use in template expressions to accept an input value and return a transformed value. Pipes are useful because you can use them throughout your application, while only declaring each pipe once.


1 Answers

Maybe this can help?

I followed all steps in https://update.angular.io/, but somehow at the end of chain I had the same problem you have: all my rxjs imports were changed, but the operators hadn't been changed to pipeable operators.

Then I noticed that the rxjs-compat package hadn't been installed (due to https://github.com/angular/angular-cli/issues/10631?). After installing rxjs-compat manually (npm install rxjs-compat --save) and running rxjs-5-to-6-migrate -p src/tsconfig.app.json again, the pipes appeared!

like image 111
David Bulté Avatar answered Sep 19 '22 23:09

David Bulté