- 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