[译文]深刻探索Angular 10

原文：Angular 10 in depth

做者：Flavio Copes

译者：晓编

Angular的最新版本Angular 10刚发布了，咱们看看有什么新特性！本文会详细讲新版本里全部值得一提的新特性，若是你想快速预览有哪些内容，能够前往Angular官方博客查看。

Angular 10 在 Angular 9 发布以后4个月就发了，相隔时间这么短，固然没有太多的变化，但这个版本仍是有一些值得一提的新特性，以及修复了不少缺陷。顺便一提，Angular团队想要每一年发布2个大版本，因此Angular 11应该会在今年秋季发布。

支持 TypeScript 3.9.x

做为一个热爱TypeScript的人，我认为这个版本最喜闻乐见的特性就是支持TypeScript 3.9.x！另外一方面Angular 10放弃了对TS 3.六、3.7和 3.8的支持，但愿不会成为你的障碍。基于编译CLI的升级和对TS3.9的支持，Angular 10 的类型检查比以往的版本都要快，这对于大多数项目来讲是个好消息，尤为是大型项目。

除此以外，Angular 10还升级到了 TSLib 2.0。TSLib简单地说就是一个提供TypeScript运行时支持方法的官方库，它要结合“tsconfig.json”里的importHelpers标记生效，当importHelpers开启的时候，编译器能够生成更紧凑、更具可读性的代码。总之不用担忧，TSLib没有太大变化。

可选的严格设置

严格模式为赢！

Angular 10 的严格模式使得咱们能够在建立时就获得一个严格的项目，这是很好的作法，值得用在全部新项目上。运行下面的命名能够建立一个严格设置的项目：

ng new --strict复制代码

它可让你更快地检测到问题的存在（在构建时发现问题总比运行时发现问题好，对吧）。这个新的option：

1. 开启TypeScript的严格模式（建议老是开启！），以及严格的Angular模板类型检测；
2. 大大下降了“angular.json”的空间预算，鼓励新用户关注应用打包的大小；
3. 强制使用更严格的TSLint配置，禁止使用“any”类型（“no-any”为true），还开启了codelyzer提供的几个有趣的规则。虽然这样作很严格，但TSLint可让你走得更远。

我认为这个新的“strict”选项很棒，有点小惋惜它只是个可选项而不是个默认选项。我的认为严格意味着更安全。若是你要建立新项目，建议使用严格模式哦。

新的TypeScript配置结构

新版本提供的默认TS配置有点变化，如今是同时提供了 “tsconfig.base.json” 、 “tsconfig.json”、“tsconfig.app.json” 和“tsconfig.spec.json”。

为何要有这些配置文件？这是为了更好地支持IDE和构建工具查找类型和编译配置。新版里面，“tsconfig.json” 只包含TypeScript项目引用，这样能够提高编译时性能，并且更严格地隔离项目的不一样部分： “tsconfig.app.json”管应用代码；“tsconfig.spec.json”管测试；“tsconfig.base.json” 里面的TypeScript配置只配置TypeScript编译器和Angular编译器选项，没有配置指定/排除编译哪些文件。那指定/排除编译哪些文件在哪里配置呢？答案是在“tsconfig.app.json”文件里面。

若是你现有的项目里没有用这个配置结构，最好检查下你的TypeScript配置以便保持一致。

NGCC

首先确保你的package.son文件里有postinstall脚本，在安装后执行NGCC。

在新版本里面，NGCC的可恢复性更强。放在之前，若是NGCC的某个工做进程崩了它不必定能恢复，如今应该没有这个问题了。此外NGCC还作了一些优化，包括性能相关的。

新的默认浏览器配置

Web浏览器发展迅速，Angular顺应潮流也更新了browserslist文件（.browserslistrc）。但正如官方博客里解释的那样，新配置带来了一个反作用，就是新项目默认禁用ES5构建。固然，如今生产ES5的代码已经没多少意义了，现代Web浏览器都至少支持ES2015了。若是你还在用IE浏览器，那就是时候告别过去了。

若是要获取具体支持的Web浏览器，能够在你的项目里执行下面的命令：

npx browserslist复制代码

它会基于根目录下的 “.browserslistrc” 文件输出结果。

Bazel

一个使人可惜的消息：Angular Bazel已经离开Angular实验室了，因此Angular项目基本上不会再支持Bazel，Bazel不再是Angular CLI的默认构建工具了。

@angular-devkit/build-angular 0.1000.0)

虽然这个包的命名很粗暴，但它包含了Angular应用构建的重要部分。最新版本的带来了几个很酷的特性：

1. 若是你用SASS，build-angular会从新定义资源的相对路径。以前的版本里，在样式文件里引用或导入 url(./foo.png) 这样的路径，都会保留准确的URL，当引入的样式文件不在同一个目录下的时候就会崩掉。如今全部使用相对资源的路径都能找到了。
2. build-angular能够去掉Webpack没法处理的重复模块，这是经过自定义Webpack解析插件实现的。

更多

增量式模板类型检查

新版的编译器CLI能够实现增量式模板类型检查。

CanLoad

之前，CanLoad guard 只能返回boolean值，如今能够返回 UrlTree 类型的值，匹配CanActivate 守卫的行为。注意，这不会影响预加载。

I18N/L10N

之前本地只能支持一个翻译文件。如今本地能够指定多个文件了，而后经过message id来合并。

Service Workers

默认的SwRegistrationStrategy有所优化。避免了以前可能会出现的 Service Worker从未注册的状况（好比有interval或递归timeout这样的长时间运行任务存在时）。

Angular Material

Angular Material 10 也跟着发布了，变化挺多的

大量的缺陷修复

Angular团队投入了大量的时间和精力去修复了积压的bug，解决了超过700个issue。

废弃特性

Angular打包格式再也不支持ESM5/FESM5，由于构建过程的最后都会降级为ES5。若是你不用Angular CLI打包，你要本身想办法把Angular代码降级到es5。

IE 九、IE 10和移动端IE浏览器都不支持了。

以及一些废弃的元素，具体看官网博客。

不带Angular装饰器的class再也不支持Angular的特性

直到Angular 9，你均可以在没有使用装饰器（好比 @Component，@Derective等）的类里面使用Angular的特性。Angular 10里面不行了，你必须加装饰器。若是你有用到组件继承，父子组件类里的其中一个没有加装饰器，就会有问题。

为何要强制变动？简单来说，Ivy编译器须要装饰器。

若是没有装饰器，Angular的编译器就不会添加依赖注入的额外代码。

若是父组件缺乏了装饰器，那子类就会继承父类的constructor，但编译器不会生成对应的constructor信息（由于没装饰）。当Angular试图建立这个子类时，就没有正确的信息去建立了。在View引擎里面，编译器能够在全局范围里查找缺失的数据，但Ivy编译器会单独处理每一个指令，这意味着更快的编译速度，但就无法像之前那样自动找到缺失的constructor信息了，只有显式添加装饰器才能提供这个信息。

若是子类缺乏了装饰器，那它就会继承父类可是没有本身的装饰器，编译器也无法知道这个类是个@Derective仍是个@Component，因此无法生成对应的指令信息。

这个变动带来的好处就是加强了Angular世界的一致性。若是你想用Angular特性，那就加上Angular装饰器。

ModuleWithProviders强制使用泛型

之前ModuleWithProviders也接受泛型，但不是强制的。NG 10里面，泛型参数是必需的，这样有利于类型安全。若是你遇到第三方库的报错：

error TS2314: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s).复制代码

建议联系做者修复，由于NGCC也无法处理。也能够先把skipLibChecks设为 false来跳过。

其余重大变动

• Resolver：返回EMPTY的会取消导航，若是你想让导航顺利完成，必须保证resolver有返回值。
• Service worker：依赖不一样header的资源的Service worker实现跟以前不同了，不一样的header会被忽略。建建议避免缓存这样的资源，可能会引发user agent不可预测的行为。由此，即便资源的header不用也能够检。缓存匹配选项能够在VGSW的配置文件里面配置。
• 属性绑定：好比[foo]=(bar$ | async).fubar这样，若是fubar的值跟以前同样，就不会触发变化检测。若是你想要触发变化检测，变通的方法就是让整个引用发生变化。
• 时间日期格式化：formatDate()和DatePipe 的格式化代码改了，以前的实现对于跨午夜的日期范围有问题
• UrlMatcher背后的方法utility type如今的返回相似能够是null
• ExpressionChangedAfterItHasBeenChecked 的报错新增了以前没检测到的场景
• Angular日志：模板里的未知元素/属性绑定从之前的warning输出级别提高到error输出级别
• 响应式表单：valueChanges 绑定到number类型的input时有个表单控制的bug，如今number的输入框再也不监听change事件，而是监听input事件。记得修改你的测试样例。这个还打破了IE9的兼容性，不过也不影响了。
• minLength 和maxLength验证器：它的值保证包含数值类型的length属性，之前没有length属性的falsy值会引发验证错误。

迁移

参考迁移指南

总结

此文探索了Angular 10的新特性、废弃特性，以及重大变动。尽管这个版本不是地震级的轰动发布，但也修复了不少缺陷，也带来不少宝藏。感谢Angular团队和社区！