- 00:00:00 angular 9 was released now what does
- 00:00:02 this mean for you
- 00:00:03 and your project in this video i'll walk
- 00:00:05 you through the most important changes
- 00:00:07 and what they mean for you and the
- 00:00:08 angular landscape
- 00:00:12 so let's have a look at the new things
- 00:00:14 angular 9 brought to us and
- 00:00:16 there is one big the main new feature in
- 00:00:20 angular 9
- 00:00:21 and that is ivy now in case you don't
- 00:00:23 know what ib is it's their new internal
- 00:00:26 view rendering engine which means it's
- 00:00:29 the logic
- 00:00:30 that brings your angular app to life you
- 00:00:32 could almost say
- 00:00:33 it's the thing which uses your
- 00:00:36 components your templates and which in
- 00:00:38 the end
- 00:00:39 turns all of that all of the component
- 00:00:41 and template logic you write
- 00:00:43 into instructions that run in the
- 00:00:46 browser when you ship your finished
- 00:00:48 angular application
- 00:00:50 these are the instructions that really
- 00:00:52 change the dom thereafter
- 00:00:54 update the dom render stuff to the page
- 00:00:56 and so on
- 00:00:57 and therefore the fact that we have a
- 00:01:00 new rendering engine
- 00:01:01 means that it's a under the hood change
- 00:01:04 the
- 00:01:05 api the syntax you work with
- 00:01:08 the way you create angular applications
- 00:01:11 components
- 00:01:12 modules and so on that has all
- 00:01:15 not changed it's still the same as
- 00:01:17 before
- 00:01:18 so everything you learned about angular
- 00:01:20 still is
- 00:01:21 valid and relevant because that is an
- 00:01:24 under the hood
- 00:01:24 change still it is an important under
- 00:01:27 the hood
- 00:01:28 change now what's the cool thing about
- 00:01:30 this new rendering engine
- 00:01:32 it already offers smaller bundles for
- 00:01:35 most angular apps not necessarily for
- 00:01:37 all but the team is working on making
- 00:01:39 every angler app smaller
- 00:01:41 and especially for very large apps the
- 00:01:44 size improvements can be very
- 00:01:45 significant
- 00:01:46 and over the next months and years of
- 00:01:48 course the angular team continues their
- 00:01:50 work on ivy
- 00:01:51 and ensure that we get smaller and
- 00:01:53 smaller bundles and therefore less code
- 00:01:56 our users have to download
- 00:01:58 so since the code we write hasn't
- 00:02:00 changed it's basically a free
- 00:02:02 win we get here where we magically now
- 00:02:05 get smaller bundles
- 00:02:06 thanks to this new rendering engine
- 00:02:08 smaller bundles of course are always
- 00:02:10 great because it means our users have to
- 00:02:12 download
- 00:02:13 less code until our app starts up and in
- 00:02:16 addition
- 00:02:16 ivy also is written in a way that offers
- 00:02:19 an amazing runtime performance
- 00:02:21 so the idea basically is that with this
- 00:02:23 new engine our apps
- 00:02:25 start up faster and once they did start
- 00:02:27 up they also
- 00:02:28 are extremely fast all thanks to ivy
- 00:02:32 another thing that changed with angular
- 00:02:34 9 is that when you build your app
- 00:02:36 for development so when you run ng-serve
- 00:02:39 in your application
- 00:02:40 it will by default use ahead of time
- 00:02:42 compilation and in the past in older
- 00:02:44 angular versions
- 00:02:45 it used just in time compilation there
- 00:02:48 now of course
- 00:02:49 technically that should give you the
- 00:02:50 same app but because of the way it does
- 00:02:52 compile your code
- 00:02:54 there actually can be some differences
- 00:02:56 or bugs
- 00:02:57 in the content it spits out now this
- 00:03:00 already could lead to some errors being
- 00:03:02 thrown during ahead of time compilation
- 00:03:04 which you wouldn't get during
- 00:03:06 just-in-time compilation
- 00:03:08 but one important new feature that was
- 00:03:10 also added with angular 9
- 00:03:12 is that you can configure how your
- 00:03:14 templates should be checked so how the
- 00:03:16 types you're using in your templates
- 00:03:18 should be checked some basic support was
- 00:03:21 available in the past too
- 00:03:23 now it's a bit more detailed you can
- 00:03:25 switch between
- 00:03:26 three different modes the basic mode the
- 00:03:28 full mode
- 00:03:29 and the strict mode this simply
- 00:03:31 determines how angular will parse your
- 00:03:34 component templates and which things it
- 00:03:37 will
- 00:03:37 check and for which things it will throw
- 00:03:39 errors and
- 00:03:41 this page on the official docs indeed is
- 00:03:43 the best way to learn
- 00:03:44 all about the differences generally and
- 00:03:47 probably as
- 00:03:48 no surprise the strict mode is well the
- 00:03:51 strictest mode of all of them which does
- 00:03:53 the most
- 00:03:54 checks and i want to show you where the
- 00:03:56 strict mode
- 00:03:57 differs from the full mode which already
- 00:03:59 existed in the past
- 00:04:01 now first of all let's check that it's
- 00:04:02 not turned on right now
- 00:04:04 in tsconfig.json or in the ts config
- 00:04:08 app.json which in the end inherits from
- 00:04:10 that
- 00:04:11 master json file here you can turn on
- 00:04:14 the template type checks with
- 00:04:16 full template type check set to true
- 00:04:19 inside of the angular compiler options
- 00:04:21 and this is an option you already could
- 00:04:23 use in the past
- 00:04:24 this will check your templates for a lot
- 00:04:26 of different things and
- 00:04:28 catch a lot of errors for example with
- 00:04:30 this mode already
- 00:04:32 if i go to my app component template
- 00:04:34 where i
- 00:04:35 have my user property here in the app
- 00:04:38 component
- 00:04:40 if i try to use user dot hobbies here
- 00:04:44 a key which does not exist in my user
- 00:04:47 object there i already get an error if i
- 00:04:50 try to save this it does compile
- 00:04:52 but it also shows me this error in the
- 00:04:54 end so that's some check i already have
- 00:04:56 in place
- 00:04:57 i can for example access user.h though
- 00:05:00 because we have a
- 00:05:01 h property in that user object now
- 00:05:04 nonetheless this actually should also
- 00:05:06 yield an error
- 00:05:08 why because if we have a look at the
- 00:05:10 user component which i'm using here
- 00:05:12 we see that the name property to which
- 00:05:14 i'm binding
- 00:05:15 actually is of type string and if we
- 00:05:17 take a closer look at the user object
- 00:05:19 we see that the age property there is a
- 00:05:22 number
- 00:05:23 so i'm actually passing a number into
- 00:05:25 this
- 00:05:26 name property it's not a string
- 00:05:29 now with angular 9 we can go back to
- 00:05:31 that tsconfig.json file
- 00:05:33 and add a new option here strict
- 00:05:36 templates
- 00:05:37 and set this to true if we do this
- 00:05:41 it will take this into account let's
- 00:05:42 restart ng-serve to make sure it picks
- 00:05:44 up the new configuration
- 00:05:46 and let's see what this gives us now
- 00:05:49 this will now compile the application
- 00:05:52 and it now gives us an error
- 00:05:54 it gives us an error that type number is
- 00:05:56 not assignable to type string
- 00:05:58 you see at the least of point of time
- 00:06:00 i'm recording this i'm not getting an
- 00:06:02 error in my ide here because the visual
- 00:06:04 studio code and the
- 00:06:06 angular language service which gets used
- 00:06:08 by visual studio code
- 00:06:10 does not know about this new setting yet
- 00:06:12 but i get an
- 00:06:13 error here in the compiler and it
- 00:06:15 catches this unnecessary error
- 00:06:17 where i'm passing the wrong type of data
- 00:06:19 into this component
- 00:06:21 once i switch this to dot name which
- 00:06:23 refers to this name which is a string
- 00:06:25 which therefore has the data type i
- 00:06:26 expect here this of course goes away
- 00:06:29 so after making this change here you see
- 00:06:32 if i restart this to show you that it
- 00:06:34 recompiles without errors
- 00:06:35 it will do so without any errors
- 00:06:39 here it is running the way it should so
- 00:06:41 that's another extra addition added by
- 00:06:43 angular 9 this extra
- 00:06:44 checking mode and if you turn it on you
- 00:06:47 can
- 00:06:48 avoid unnecessary mistakes which might
- 00:06:50 not have necessarily crashed your
- 00:06:52 application in the past
- 00:06:54 but which still might be something you
- 00:06:56 want to look into and you want to fix
- 00:06:59 angular 9 also brought some minor
- 00:07:02 breaking changes and deprecations
- 00:07:05 and for that to learn more the best way
- 00:07:07 really is to go to the official angular
- 00:07:09 9 update guide which you find on
- 00:07:11 angular dot io and there you can learn
- 00:07:14 more about the
- 00:07:15 deprecations and changes and i can
- 00:07:17 already tell there is nothing
- 00:07:19 major in there of course we have ivy
- 00:07:22 which is not a change where we have to
- 00:07:24 change anything it's just under the hood
- 00:07:26 change change
- 00:07:27 typescript version yeah that is not too
- 00:07:30 hard
- 00:07:30 and then some deprecations of features
- 00:07:33 which you most likely
- 00:07:34 didn't use anyway so you can safely
- 00:07:36 ignore that
- 00:07:37 no application should be broken because
- 00:07:40 of updating to angular 9.
- 00:07:42 speaking of that if you have an
- 00:07:44 application you want to update
- 00:07:46 you can simply run ng update at angular
- 00:07:48 cli
- 00:07:49 at angular core and by the point of time
- 00:07:51 you are watching this video dash dash
- 00:07:53 next is not required anymore because
- 00:07:56 then the
- 00:07:56 next version will already be the current
- 00:07:59 version angular 9.
- 00:08:00 so this is a simple command you can run
- 00:08:02 in your angular project
- 00:08:04 and it will automatically perform all
- 00:08:06 the package updates
- 00:08:07 and so on that are required to update
- 00:08:09 your application
- 00:08:12 one of the bigger changes we also have
- 00:08:15 with angular 9 and which we
- 00:08:16 actually already had with angular 8 is
- 00:08:19 that when you're using
- 00:08:20 at view child in your components to
- 00:08:24 select some element from your template
- 00:08:26 and work with it in your component
- 00:08:28 you have to add this extra static option
- 00:08:32 i got an example project here very
- 00:08:34 simple one
- 00:08:35 and there in my new product component i
- 00:08:37 use add view child
- 00:08:39 to get access to one of my inputs simply
- 00:08:42 just to show this change not because
- 00:08:44 there wouldn't be another way there
- 00:08:45 would be with ng model
- 00:08:47 but here i am using add view child and
- 00:08:50 in angular 8 you already had to add this
- 00:08:53 second argument to add view child and
- 00:08:56 set static to
- 00:08:57 false in most scenarios now in
- 00:09:00 angular 9 whenever static was set to
- 00:09:03 false you can just get rid of this
- 00:09:05 argument
- 00:09:05 you're back to the mode we had before in
- 00:09:08 angular 7 and older
- 00:09:09 so we can just use add view child like
- 00:09:12 this there is just one exception
- 00:09:14 if you want to use this element before
- 00:09:16 change detection ran
- 00:09:18 which is typically the case in ngon init
- 00:09:20 for example
- 00:09:22 you have to add static true so static
- 00:09:25 false basically never needs to be added
- 00:09:27 it's the default
- 00:09:28 but static true needs to be added if you
- 00:09:31 access the element you're getting access
- 00:09:34 to
- 00:09:34 inside of engion in it so before change
- 00:09:37 detection ran
- 00:09:38 then you need to add this you already
- 00:09:40 needed to do this in angular 8.
- 00:09:42 you still need to do it at angular 9.
- 00:09:44 the difference to angular 8
- 00:09:46 just is that in angular 8 you also
- 00:09:48 needed to add this for
- 00:09:50 static false in angular 9 if it's false
- 00:09:52 you can omit it
- 00:09:53 so true always required false can be
- 00:09:56 omitted
- 00:09:57 and this is already it so doesn't really
- 00:10:00 sound like
- 00:10:00 a lot changed does it well ivy is
- 00:10:04 a big change even though it's just under
- 00:10:06 the hood and therefore we don't see it
- 00:10:08 but getting smaller bundles in
- 00:10:10 our applications is a huge win since we
- 00:10:12 don't need to change our code
- 00:10:14 to benefit from that and in addition
- 00:10:16 when we think about angular
- 00:10:18 10 and the future of angular in general
- 00:10:20 ivy will most likely play a major role
- 00:10:23 of course the angular team continues to
- 00:10:24 work on ib and therefore we'll see more
- 00:10:26 and more
- 00:10:27 size improvements and all the runtime
- 00:10:29 performance improvements over time
- 00:10:31 which we all get for free because it's
- 00:10:33 the underlying rendering engine
- 00:10:34 so this is a huge change and in addition
- 00:10:37 besides
- 00:10:38 bug fixes and other improvements we
- 00:10:40 might also see
- 00:10:41 new apis or new syntax we can use in
- 00:10:44 angular apps to build
- 00:10:46 our apps that is possible because of ivy
- 00:10:49 which does not mean that you have to
- 00:10:51 relearn
- 00:10:51 everything and you will write your
- 00:10:54 angular apps in a totally different way
- 00:10:56 but if some things will get easier over
- 00:10:59 time
- 00:10:59 for example if you at some point don't
- 00:11:01 need ng modules anymore or something
- 00:11:04 like that
- 00:11:05 then certainly no one would complain so
- 00:11:07 we'll see improvements there we'll
- 00:11:09 obviously get the size improvements and
- 00:11:11 we might see exciting new features
- 00:11:13 based on ivy in angular 10 and beyond
- 00:11:16 so a huge release even though you don't
- 00:11:18 directly see it but ib is a huge
- 00:11:21 change really helping us with our
- 00:11:23 applications and we get it for free
- 00:11:25 you don't need to adjust anything