Angular 9 - 新增与改变


0:00:00.310,0:00:05.040 Angular 9 was released. Now. What does this mean for you and your project in this video?

Angular 9 已经发布了。本视频将告诉你这对于你和你的项目意味着什么。

0:00:05.040,0:00:09.719 I'll walk you through the most important changes and what they mean for you and the angular landscape

我将带你遍历一些最重要的改动,以及它们对你和 Angular 生态圈意味着什么。

0:00:12.260,0:00:17.350 So, let's have a look at the new things angle or 9 brought to us and there is one big

好,我们先看看 Angular 9 带给我们的一些新东西,Angular 9 中有一个重大的新特性

0:00:17.810,0:00:21.730 the main new feature in angular 9 and that is

这个新特性就是 Ivy。

0:00:22.250,0:00:27.729 IV now in case you don't know what obvious it's their new internal view rendering engine


0:00:27.739,0:00:34.899 Which means it's the logic that brings your angular app to life. You could almost say it's the thing which

这意味着它就是给你的 Angular 应用带来生命的那部分逻辑。你可以这样来形象地理解它:

0:00:35.450,0:00:41.229 uses your components or templates and which in the end turns all of that all of the


0:00:41.480,0:00:48.670 Component and template logic you write into instructions that run in the browser when you ship your finished angular

组件和模板逻辑都转换成一些计算机命令,当你发布 Angular 应用时,浏览器会执行它们。

0:00:49.160,0:00:53.410 Application. These are the instructions that really change the Dom

这些计算机命令才会真正修改 DOM。

0:00:53.410,0:00:57.459 they're after updated Dom render stuff to the page ends on and

更新完 DOM 之后,这些内容就会被渲染到页面上。

0:00:58.040,0:01:00.909 Therefore the fact that we have a new rendering engine


0:01:01.610,0:01:09.489 Means that it's a under the hood change the API the syntax you work with the way you create

这意味着,API 的幕后实现发生了变化,而你创建 Angular 应用时所用的语法

0:01:09.740,0:01:16.210 Angular applications components modules and so on that has all not changed


0:01:16.210,0:01:18.249 It's still the same as before so


0:01:18.859,0:01:25.149 Everything you learned about angular still is valid and relevant because that is under the hood change

你学会的关于 Angular 的一切都仍然有效,这是因为发生改变的只是其幕后实现

0:01:25.460,0:01:29.499 Still it isn't important under the hood change now


0:01:29.499,0:01:31.689 What's the cool thing about this new rendering engine?


0:01:31.969,0:01:39.219 It already offers smaller bundles for most angular apps not necessarily for all but the team is working on making

对于大多数 Angular 应用来说,它已经提供了更小的打包尺寸。它虽然还不是所有应用都能看到效果,不过开发组仍在努力让

0:01:39.350,0:01:44.259 Every angular app smaller and especially for very large apps the size

每个 Angular 应用都能更小一点,特别是对于超大型应用来说,体积的改进

0:01:44.509,0:01:48.519 Improvements can be very significant and over the next months and years


0:01:48.520,0:01:53.950 Of course the angular team continues to work on Ivy and ensure that we get smaller and smaller

当然,Angular 开发组会继续改进 Ivy,以确保我们的打包尺寸越来越小

0:01:54.380,0:01:57.369 bundles and therefore less code our users have to download


0:01:58.219,0:02:01.178 So since the code we write hasn't changed


0:02:01.179,0:02:08.139 It's basically a free win we get here where we magically now get smaller bundles. Thanks to this new rendering engine


0:02:08.840,0:02:16.330 smaller bundles of course are always great because it means our users have to download less code until our app starts up and in


0:02:16.400,0:02:21.250 Addition ivy also is written a way that offers an amazing runtime performance

另外,Ivy 还提供了惊人的运行时性能

0:02:21.440,0:02:28.630 so the idea basically is that with this new engine our apps startup fair and once they did startup they also are


0:02:28.970,0:02:31.270 Extremely fast all thanks to ivy

运行得超级快。感谢 Ivy!

0:02:32.210,0:02:37.899 Another thing that changed with angular 9. Is that when you build your app for development?

Angular 9 改变的另一件事情是在开发期间你何时构建应用。

0:02:37.900,0:02:40.270 So when you run ng serve in your application

当你在应用中运行 ng serve 时

0:02:40.270,0:02:45.790 It will by default use ahead of time compilation and in the past in older angular versions

它将默认使用 AOT 预先编译模式,而在以前的老版本应用中

0:02:45.790,0:02:48.129 It used just-in-time compilation there

它使用 JIT 即时编译模式

0:02:48.290,0:02:51.279 Now, of course, technically that should give you the same app


0:02:51.280,0:02:57.820 But because of the way it does compile your code there actually can be some differences or bugs

但是因为你的代码的编译途径不同,这两种版本实际上会有一些差异或 BUG。

0:02:57.950,0:03:04.000 In the content it spits out notice already could lead to some errors being thrown during ahead of time compilation

它们在内容处理方式上的差异,可能会导致在 AOT 编译期间抛出一些错误。

0:03:04.430,0:03:07.239 Which you wouldn't get during just-in-time compilation

而在 JIT 编译期间,这些错误却不会出现。

0:03:07.850,0:03:15.790 but one important new feature that was also held with angular 9 is that you can configure how your templates should be checked

但是 Angular 9 还有另一项重要的特性,就是你可以配置如何对模板进行检查

0:03:15.790,0:03:23.409 So how the types you're using in your templates should be checked some basic support was available in the past too now


0:03:23.410,0:03:24.910 It's a bit more detailed


0:03:24.910,0:03:31.089 You can switch between three different modes the basic mode the full mode and the strict mode


0:03:31.340,0:03:34.510 This simply determines how angular will parse your

它会决定 Angular 将如何解析你的

0:03:34.850,0:03:40.629 component templates and which things it will check and for which things it will throw errors and


0:03:41.180,0:03:45.700 Dispatch on the official docs indeed is the best way to learn all about the differences


0:03:46.010,0:03:53.139 Generally and probably as no surprise the strict mode is well the strictest mode of all of them


0:03:53.140,0:03:57.220 Which does the most checks and I want to show you where the strict mode


0:03:57.500,0:04:02.769 Differs from the full mode which already existed in the past now, first of all, let's check that


0:04:02.769,0:04:08.739 It's not turned on right now in TS config dot. Jason or in the TS config app dot

在 tsconfig.json 或 tsconfig.app.json 中是否打开了严格模式

0:04:08.930,0:04:12.940 Jason, which in the end inherits from that master. Jason file here

tsconfig.app.json 从 tsconfig.json 中继承了设置

0:04:13.070,0:04:20.559 You can turn on the template type checks with full template type check set to true inside of the angular compiler

你可以在 angularCompilerOptions 中把 fullTemplateTypeCheck 设置为 true 来打开模板类型检查。

0:04:20.810,0:04:24.070 Options and this is an option. You already could use in the past


0:04:24.350,0:04:29.109 This will check your templates for a lot of different things and catch a lot of errors


0:04:29.330,0:04:34.599 for example with this mode already if I go to my app component template where I


0:04:35.180,0:04:41.890 Have my user property here in the app component if I try to use user dot

有一个 user 属性,如果我尝试使用 user.hobbies

0:04:42.890,0:04:47.919 Hobbies here a key which does not exist in my user object there

而这个 hobbies 并不存在于 user 对象中。

0:04:47.920,0:04:55.089 I already get an error if I try to save this, it does compile but it also shows me this error in the end


0:04:55.090,0:04:56.990 So that's some check I already have in place


0:04:56.990,0:05:03.640 I can for example access user dot H, though because we have an H property in that user object

比如,我可以访问 user.age,因为我们的 user 对象中有一个 age 属性。

0:05:04.160,0:05:07.600 Now nonetheless. This actually should also yield an error


0:05:07.880,0:05:11.679 Why because if we have a look at the user component, which I'm using here?

为什么呢?如果看看 user 组件就会看到我们正在用哪一个。

0:05:11.720,0:05:14.799 We see that the name property to which I'm binding

可以看到,我们正在绑定到的 name 属性

0:05:15.230,0:05:19.569 Actually is of type string and if we take a closer look at the user object

实际上是 string 类型的,而如果我们仔细看 user 对象

0:05:19.570,0:05:24.640 We see that the H property there is a number so I'm actually passing a number

就会发现它的 age 属性是一个数字,所以,我实际上是在把一个数字传给

0:05:25.040,0:05:27.399 into this name property

name 属性

0:05:27.740,0:05:35.590 It's not a string now with angular 9 we can go back to that TS config dot JSON file and add a new option here

age 不是 string,在 Angular 9 中,我们可以回到 tsconfig.json 文件中,并且在此添加一个新的选项

0:05:35.870,0:05:42.010 Strict templates and set this to true and if we do this it will take this into account

strictTemplates,并且把它设为 true,然后编译器就会考虑这一点

0:05:42.230,0:05:47.890 Let's restart ng surf to make sure it picks up the new configuration and let's see what this gives us now

重启 ng serve,以便让它使用新的配置。让我们看看它会带给我们什么

0:05:49.589,0:05:53.488 This will now compile the application and it now gives us an error


0:05:53.919,0:06:01.079 It gives us an error that type number is not assignable to type string you see at the least of point of time I'm recording this

它告诉我们,number 类型不能赋值给 string 类型。至少在我录制本视频的时候是这样的。

0:06:01.079,0:06:07.888 I'm not getting an error in my IDE here because Visual Studio code and the angular language service

我在 IDE 中没有看到错误,是因为 VSCode 和它使用的 Angular 语言服务

0:06:07.889,0:06:12.359 Which gets used by Visual Studio code does not know about this new setting yet


0:06:12.519,0:06:16.259 But I get an error here in a compiler and it catches this


0:06:16.539,0:06:22.738 Unnecessary error where I'm passing the wrong type of data into this component once I switch this to dot name

非必要错误:我把错误的数据类型传给了该组件。一旦我把它改成 .name

0:06:22.809,0:06:29.039 Which refers to this name, which is a string which therefore has two data type. I expect here this of course goes away

它就会引用用户名,用户名是 string,也就不再是两个不同的类型了。我认为这个问题应该解决了。

0:06:29.139,0:06:34.019 So after making this change here you see if I restart this to show you that it


0:06:34.269,0:06:38.039 Recompiles without errors it will do so without any errors


0:06:38.859,0:06:41.729 Here it is running the way it should so that's an average

它运行得很正常。Angular 9 在传统的检查之外,

0:06:42.129,0:06:49.498 Tradition added by angular 9 this extra checking mode and if you turn it on you can avoid unnecessary mistakes


0:06:49.629,0:06:53.638 Which might not have necessarily crashed your application in the past?


0:06:53.889,0:06:58.589 But which still might be something you want to look into and you want to fix?


0:06:59.709,0:07:04.589 angular 9 also brought some minor breaking changes in deprecations and

Angular 9 还带来了一些小的破坏性变更和弃用

0:07:05.079,0:07:11.669 For that to learn more the best way really is to go to the official angular 9 update guide which you find on

欲知详情,最好的方式是到官方文档中的 Angular 9 升级指南

0:07:11.769,0:07:15.119 angular io and there you can learn more about the


0:07:15.519,0:07:20.459 Deprecations and changes and I can already tell there is nothing major in there


0:07:20.459,0:07:25.138 Of course we have Ivy which is not a change where we have to change anything

当然,我们有了 Ivy,但是我们不需要为此而改变任何东西

0:07:25.139,0:07:28.769 It's just under the hood change change typescript version

它只是在幕后更改了 TypeScript 版本

0:07:28.769,0:07:35.819 Yep, that is not too hard and then some deprecations of features, which you most likely didn't use anyway


0:07:35.819,0:07:42.238 So you can safely ignore that no application should be broken because of updating to angular 9

所以你可以放心的升级到 Angular 9,而不会有什么应用被破坏。

0:07:42.939,0:07:43.829 speaking of that


0:07:43.829,0:07:45.359 If you have an application


0:07:45.359,0:07:46.179 You want to update?


0:07:46.179,0:07:53.819 you can simply run ng update at angular CLI at angular core and fire the point of time you're watching this video - - next

你可以运行 ng update @angular/cli @angular/core。在我录制这个视频的时间点,可能还要加上 --next

0:07:53.819,0:08:00.208 Is not required anymore because then that next version will already be the current version angular 9

不过以后就不需要了,因为那时候 Angular 9 可能已经正式发布了

0:08:00.489,0:08:04.469 So this is a simple command you can run in angular project and it will

所以,你可以在 Angular 应用中运行这条简单的命令,它会

0:08:04.690,0:08:09.869 Automatically perform all the package updates ends on that are required to update your application


0:08:11.590,0:08:19.260 Now one of the bigger changes we also have with angular 9 and which we actually already had with angular 8 is

现在,我们来讲讲 Angular 9 所做的一项比较大的修改,我们实际上在 Angular 8 就已经开始做了。

0:08:19.480,0:08:22.799 that when you're using at view child in your

当我们在组件中使用 @ViewChild 来从

0:08:23.050,0:08:29.550 Components to select some element from your template and work with it in your component. You have to add this extra


0:08:30.100,0:08:31.710 static option

static 选项

0:08:31.710,0:08:35.009 I got an example project here, very simple one and


0:08:35.470,0:08:41.249 There in my new product component I use at view child to get access to one of my inputs

在这个新的 Product 组件中,我使用 @ViewChild 来访问我的输入框之一

0:08:41.470,0:08:47.160 Simply just to show this change not because there wouldn't be another way there would be with ng-model

这里只是为了演示这项修改,而不是因为不能用 ngModel 等方式

0:08:47.710,0:08:55.560 but here I am using at view child and an angular 8 you already had to add this second argument to add view child and

这里我要用 @ViewChild,并且在 Angular 8 中你已经被迫给 @ViewChild 加上了第二个参数,

0:08:55.750,0:08:58.590 Set static to false in most scenarios

大多数情况下它都被设置为 false

0:08:59.380,0:09:05.820 Now in angular 9 whenever static was set to false you can just get rid of this argument

现在,在 Angular 9 中,当 static 被设置为 false 时,你就可以抛掉这个参数了

0:09:05.820,0:09:12.270 You're back to the mode we had before an angular 7 and older so we can just use add view child like this

你回到了 Angular 7 或更早的模式,所以我们可以像这样使用 @ViewChild

0:09:12.340,0:09:16.560 There is just one exception if you want to use this element before


0:09:16.720,0:09:21.060 Change detection ran which is typically the case in ng on in it. For example

比如,典型的是在 ngOnInit 中使用它。

0:09:21.700,0:09:27.030 You have to add static true. So static false basically never needs to be added

你就必须加上 static: true。所以永远不用加 static: false。

0:09:27.030,0:09:36.150 It's the default but static true needs to be added if you access the element you're getting access to inside of ng on in it

它是默认选项,但如果你要在 ngOnInit 中访问它,就需要加上 static: true。

0:09:36.150,0:09:38.150 So before change detection ran


0:09:38.350,0:09:42.360 Then you need to add this you already needed to do this in angular 8

然后,你需要在 Angular 8 中添加该选项。

0:09:42.360,0:09:47.969 You still need to do it an angular 9 the difference to angular 8 justice dead in angular 8

在 Angular 9 中你仍然需要像 Angular 8 中那样做。

0:09:47.970,0:09:53.279 You also need to add this for aesthetic false in angular 9 if it's false, you can omit it

如果为 false,你仍然可以出于美观而添加它,但是你也可以省略它

0:09:53.380,0:09:57.030 so true always required false can be omitted and

所以,true 是始终需要的,而 false 可以省略。

0:09:57.580,0:10:02.340 This is already it so doesn't really sound like a lot changed does it?


0:10:02.620,0:10:10.260 well IV is a big change even though it's just under hood and therefore we don't see it but getting smaller bundles in our

虽然 Ivy 是一个重大升级,但它只是幕后的,所以我们不用关心它,只要享受更小的应用打包尺寸就可以了。

0:10:10.780,0:10:15.089 Applications is a huge win since we don't need to change our code to benefit from that


0:10:15.750,0:10:20.219 And in addition when we think about angular 10 and the future of angular in general

另外,当我们思考 Angular 10 以及 Angular 的未来时

0:10:20.220,0:10:22.650 I we will most likely play a major role


0:10:22.650,0:10:29.429 Of course the angular team continues to work on IB and the effort will see more and more Assizes improvements and all the runtime performance

当然,Angular 开发组会持续改进 Ivy,这些努力会带来更小的打包尺寸以及更好的运行时性能

0:10:29.770,0:10:34.619 Improvements over time which we all get for free because it's the underlying rendering engine


0:10:34.620,0:10:39.270 so this is a huge change and in addition besides bug fixes and other improvements

所以,除了 bug 修复和其它改进之外,这还是一个巨大的变化。

0:10:39.580,0:10:44.039 we might also see new api's or new syntax

我们还可能会看到新的 API 和新的语法

0:10:44.040,0:10:46.440 We can use in angular apps to build our apps

我们可以在 Angular 应用中使用它

0:10:46.630,0:10:53.159 That is possible because of IB which does not mean that you have to relearn everything and

这些都是可能的,因为 Ivy 并不要求我们重新学习任何东西。

0:10:53.410,0:11:01.020 you will write your angular apps in a totally different way, but if some things will get easier over time, for example, if you at some point

而你将用完全不同的方式编写 Angular 应用,但是随着时间的推移,有些事情会变得更容易,比如,未来的某一天

0:11:01.560,0:11:06.900 Don't need energy modules anymore or something like that, then certainly no one would complain


0:11:07.510,0:11:14.219 so we'll see improvements there will obviously get the size improvements and we might see exciting new features based on IV in

所以,我们会看到一些明显的改进,比如体积的优化,我们还会在 Angular 10 等后续版本中看到机遇 Ivy 的激动人心的新特性

0:11:14.380,0:11:21.390 Angular 10 and beyond so a huge release even though you don't directly see it, but IVs a huge change

所以,即使你无法直接看到它,它仍然是一个巨大的发布,Ivy 将带来巨大的改变。

0:11:21.580,0:11:26.879 Really helping us with our applications and we get it for free. You don't need to adjust anything