Angular 9 – What’s New? What changed?

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

You may also like