Fix your RxJS 6 Imports & Operators – What’s New in RxJS 6?

00:00:01 our XJS version six is out and whilst
00:00:06 Israeli is worth an entire video since
00:00:09 angular six uses it by default this will
00:00:12 actually affect quite a lot of projects
00:00:15 our XJ x6 introduces a lot of breaking
00:00:18 changes though most of the time you only
00:00:20 need to change two things to make it
00:00:23 work again and if you really want to
00:00:25 save time
00:00:25 you only need to execute one command to
00:00:28 make all your old code work how this
00:00:30 works let's have a look in this video
00:00:35 so before we dive into any of the
00:00:37 breaking changes rxjs 6 introduces due
00:00:41 to a change project structure and so on
00:00:43 the quick fix you can run in any project
00:00:46 which you're updating to rxjs version 6
00:00:49 so for example in an angular project
00:00:52 which you're updating to angular 6 which
00:00:54 needs rxjs the quick fix you can run is
00:00:57 npm install' – – save rxjs comp at this
00:01:02 extra library makes your old code work
00:01:05 so with that your old imports your old
00:01:08 usage of operators this all should
00:01:10 continue to work fine you don't need to
00:01:12 change anything in your code and it
00:01:15 doesn't even add a lot to your bundle
00:01:17 size so you're not even bloating your
00:01:19 code a lot this ensures backward
00:01:22 compatibility and all old code shouldn't
00:01:25 require any changes so this is a great
00:01:28 first step you can do so that you can
00:01:30 then smoothly update step by step and
00:01:32 you don't suddenly break your entire
00:01:34 project but why does it break at all so
00:01:38 what did really change our XJS 6
00:01:41 introduces two very important changes in
00:01:43 the end the first one is a changed
00:01:45 package structure internally they
00:01:48 reorganized things to make the bundles
00:01:51 smaller and also to make imports easier
00:01:53 therefore we basically have to update
00:01:56 all our import statements and how we use
00:01:59 operators because they also embrace
00:02:01 another new concept pipe pipe herbal
00:02:04 operators this allows us to use the
00:02:07 operators a little bit different than
00:02:09 before also to improve usability and
00:02:13 bundle size and this also led to some
00:02:17 operators being renamed why well you'll
00:02:20 see that in a second so these are the
00:02:22 two important changes an internal change
00:02:25 in the project structures are to say in
00:02:27 the package structure and then the
00:02:28 exports and therefore in the way we have
00:02:30 to import it and these pipeable
00:02:33 operators now let's have a look at how
00:02:35 this actually affects our existing code
00:02:38 and how we can easily update without
00:02:40 that command I showed you because that
00:02:42 of course is the quickest way let's
00:02:43 start with the changed imports in
00:02:45 general in the past you had imports
00:02:48 like this import observable from rxjs
00:02:51 observable or import subject from rxjs
00:02:55 slash subject in the future you'll just
00:02:58 have import observable subject and so on
00:03:01 from rxjs no slash something for
00:03:05 operators you typically used import rxjs
00:03:08 slash add slash operator slash map or
00:03:12 rxjs /rx if you wanted to import
00:03:15 everything now in the future you import
00:03:18 operators separately with import map for
00:03:22 example from our extras slash operators
00:03:25 so this is very similar to the first
00:03:28 update where you import observable from
00:03:30 rxjs you get a second import destination
00:03:33 slash operators and you get your
00:03:35 operators from there now if you have
00:03:38 observable creation methods like from
00:03:40 promised in the past you used import
00:03:43 rxjs add observable from promise to
00:03:46 patch this function into the observable
00:03:48 um object so to say in the future you'll
00:03:52 import from promise from rxjs
00:03:54 so from the same path where you import
00:03:56 the observable and then you execute it
00:04:00 just as a function you don't edit your
00:04:02 don't chain it to the observable object
00:04:05 but we'll see all this in a second
00:04:06 so the general important thing to take
00:04:09 away is you got two new import
00:04:11 destinations from our extras and from
00:04:14 rxjs
00:04:15 slash operators speaking of operators we
00:04:19 get pipeable operators now which simply
00:04:22 means that this will become this so not
00:04:26 only do the import statements change
00:04:28 here as I just explained on our

00:04:31 observable some observable in the past
00:04:34 we chained all these operators map
00:04:37 trottle and then we finally subscribed
00:04:39 in the future with rxjs six and higher
00:04:42 we use that special pipe method on the
00:04:45 observable and that method takes an
00:04:48 infinite amount of arguments where each
00:04:50 argument is simply an operator function
00:04:52 so here we add map fraud land so on as
00:04:55 arguments and these operators continue
00:04:58 to work as they did we just add them
00:04:59 like this we don't chain them to the
00:05:01 observer
00:05:02 in the end we still subscribe now due to
00:05:05 these type of operators some operators
00:05:08 needed to be renamed because they
00:05:10 clashed with reserved words and
00:05:12 JavaScript because we're not calling
00:05:14 them as methods anymore they're now
00:05:16 normal functions so they must not be
00:05:18 named like JavaScript keywords therefore
00:05:21 du becomes tap because do is a reserved
00:05:25 keyword and JavaScript catch becomes
00:05:28 catch error for the same reason well all
00:05:31 these operators were renamed for this
00:05:33 reason in the end switch becomes switch
00:05:36 all finally becomes finalized and not an
00:05:42 operator but a method which allows us to
00:05:44 create observables throw which we could
00:05:47 also change to the observable object in
00:05:49 the past becomes a standalone method
00:05:51 like all observable creation methods and
00:05:53 it's now throw error because fro alt is
00:05:56 a keyword with that let's see how this
00:05:59 works in code how can we actually update
00:06:01 an existing project to rxjs X here's an
00:06:04 angular project but of course this
00:06:06 effects any project using rxjs 6 but in
00:06:09 this angular project in my app component
00:06:11 I have some valid rxjs operator and
00:06:15 observable usage that would have worked
00:06:17 in the past we're doing HTTP request
00:06:20 with the angular HTTP client we get back
00:06:23 an observable therefore and we first of
00:06:25 all map to extract our data and well
00:06:28 change its structure then I use catch
00:06:31 and finally I subscribe instead of map
00:06:34 you could have also used merge map I
00:06:36 just added this year so that I can show
00:06:39 how this is renamed so this is the old
00:06:41 way of using observables and operators
00:06:43 and here are the old imports now as you
00:06:46 can see my package star Jason fall I'm
00:06:48 using angular 6 and I'm using rxjs
00:06:51 version 6 release candidate here but
00:06:53 still version 6 therefore if I run ng
00:06:57 surf and I try to bring up my
00:06:59 development server I get DC live warning
00:07:02 but we can't ignore this more
00:07:03 importantly is that when it tries to
00:07:06 build my project it will fail and it
00:07:09 does fail with cannot find module error
00:07:11 rxjs compatible now this
00:07:16 is thrown because I'm using the old
00:07:18 import styles here and by default the
00:07:22 rxjs package tries to find that compact
00:07:25 package so that you don't have to do
00:07:27 anything but install that package to
00:07:29 make that old syntax work so what we can
00:07:32 do is can stop that server and run npm
00:07:35 install – – save rxjs – compact and this
00:07:39 will install this compatibility package
00:07:42 once we had entered this we'll well
00:07:45 download and install it and once this is
00:07:48 done we can run ng surf and now it will
00:07:51 compile an our entire project and bring
00:07:53 up that development server and it will
00:07:55 start without errors
00:07:57 now once did start we can load our app
00:08:00 and indeed it works ass before these are
00:08:02 the blog posts loaded wire D angular
00:08:05 HTTP client and handled through
00:08:07 observables so this is the quickest way
00:08:09 of getting our old code to work now we
00:08:12 get an error here for fro because this
00:08:14 was actually renamed but as a chained
00:08:16 operator this still works so we can
00:08:19 ignore this error but let's now update
00:08:21 to rxjs 6 without using that compact
00:08:24 package though I will note that using it
00:08:27 is absolutely fine doesn't add a lot of
00:08:29 size to your bundle and makes your code
00:08:32 work so definitely a great in-between
00:08:34 step and a great step in case you got
00:08:37 some code you just can't get to work
00:08:38 otherwise but let's now get rid of it so
00:08:41 I'll quit my server here and I'll run
00:08:43 NPM uninstall safe rxjs comput simply
00:08:47 just to remove it both from my package
00:08:50 to JSON file and from the node modules

00:08:53 folder and therefore if I run ng serve
00:08:55 we'll be back to getting an error of
00:08:57 course
00:08:58 now let's update our code NQ work again
00:09:01 do not have this error anymore and for
00:09:04 this we first of all need to change our
00:09:06 import observable for example is
00:09:08 imported from just rxjs without slash
00:09:11 observable now this is also not needed
00:09:14 anymore
00:09:14 this way of importing operators now this
00:09:18 previously imported all operators so
00:09:20 this was an option to dis syntax anyways
00:09:23 but this although is not needed anymore
00:09:25 and will directly import the operators
00:09:28 but we have to
00:09:29 the different syntax for this so now we
00:09:31 simply import the operators from rxjs
00:09:35 operators and from there we import map
00:09:39 in our case because that's really only
00:09:41 the operator we're using we also get
00:09:44 throwin off but these are simply ways of
00:09:46 creating a new observable so we import
00:09:48 them from rxjs
00:09:50 off and fro error is the new name
00:09:53 actually so this is also a renamed one
00:09:56 because fro just like Kachins on is a
00:09:58 reserved keyword now we can get rid of
00:10:01 these imports too and now this is our
00:10:03 updated import syntax now we need to
00:10:06 change the way we use that map operator
00:10:08 we use pipe instead and there we just
00:10:11 pass this map function without the dot
00:10:14 because we're now not calling this as a
00:10:16 method it's now a function we passed
00:10:18 this map function as an argument and if
00:10:20 we had more than one operator we would
00:10:22 simply chain it thereafter so if we were
00:10:24 also using the tap operator we would put
00:10:27 our tap code here as a second argument
00:10:29 and the pipe method we of course would
00:10:32 have to import tap too now catch
00:10:35 actually is an average which we need to
00:10:38 import so that was missing so let's
00:10:40 import catch and this was renamed to
00:10:42 catch error as I said so import catch
00:10:44 error from rxjs operators and with that
00:10:48 we also do change this here after map we
00:10:51 have catch error and we got our error
00:10:54 here now observable throw is not correct
00:10:57 anymore
00:10:57 it's just throw error like this and with
00:11:01 that we can now safely subscribe here
00:11:04 merge map if you used it would be smoosh
00:11:06 map add it to the pipe chain here with
00:11:10 all that now we can save that and rerun
00:11:14 our development server and now it should
00:11:17 work because now we updated the import
00:11:19 paths and we're using the new pipeable
00:11:21 operators and this does indeed look good
00:11:24 if we reload it works as before and a
00:11:28 very open the console we also don't see
00:11:30 any errors there so now we updated this
00:11:33 project to rxjs 6 with the quick way the
00:11:36 rxjs compact package or by changing the
00:11:39 imports and by using pipe flow operators
00:11:42 as you
00:11:43 so this wasn't too difficult either was
00:11:45 just some extra work but in the end the
00:11:48 upgrade path is really smooth not too
00:11:50 problematic and I hope this is helpful
00:11:53 and helps you upgrade your next angular
00:11:56 or whatever project to rxjs six

You may also like