本文摘自PHP中文网，作者青灯夜游，侵删。
本篇文章带你深入探索Angular 10。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
Angular的最新版本Angular 10刚发布了，我们看看有什么新特性！本文会详细讲新版本里所有值得一提的新特性，如果你想快速预览有哪些内容，可以前往Angular官方博客查看。
Angular 10 在 Angular 9 发布之后4个月就发了，相隔时间这么短，当然没有太多的变化，但这个版本还是有一些值得一提的新特性，以及修复了很多缺陷。顺便一提，Angular团队想要每年发布2个大版本，所以Angular 11应该会在今年秋季发布。【相关教程推荐：《angular教程》】
支持 TypeScript 3.9.x
作为一个热爱TypeScript的人，我认为这个版本最喜闻乐见的特性就是支持TypeScript 3.9.x！另一方面Angular 10放弃了对TS 3.6、3.7和 3.8的支持，希望不会成为你的障碍。基于编译CLI的升级和对TS3.9的支持，Angular 10 的类型检查比以往的版本都要快，这对于大多数项目来说是个好消息，尤其是大型项目。
除此之外，Angular 10还升级到了 TSLib 2.0。TSLib简单地说就是一个提供TypeScript运行时支持方法的官方库，它要结合“tsconfig.json”里的importHelpers标记生效，当importHelpers开启的时候，编译器可以生成更紧凑、更具可读性的代码。总之不用担心，TSLib没有太大变化。
可选的严格设置
严格模式为赢！
Angular 10 的严格模式使得我们可以在创建时就得到一个严格的项目，这是很好的做法，值得用在所有新项目上。运行下面的命名可以创建一个严格设置的项目：
1 |
|
它可以让你更快地检测到问题的存在（在构建时发现问题总比运行时发现问题好，对吧）。这个新的option：
开启TypeScript的严格模式（建议总是开启！），以及严格的Angular模板类型检测；
大大降低了“angular.json”的空间预算，鼓励新用户关注应用打包的大小；
强制使用更严格的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浏览器，可以在你的项目里执行下面的命令：
1 |
|
它会基于根目录下的 “.browserslistrc” 文件输出结果。
Bazel
一个令人惋惜的消息：Angular Bazel已经离开Angular实验室了，所以Angular项目基本上不会再支持Bazel，Bazel再也不是Angular CLI的默认构建工具了。
@angular-devkit/build-angular 0.1000.0)
虽然这个包的命名很粗暴，但它包含了Angular应用构建的重要部分。最新版本的带来了几个很酷的特性：
如果你用SASS，build-angular会重新定义资源的相对路径。之前的版本里，在样式文件里引用或导入 url(./foo.png) 这样的路径，都会保留准确的URL，当引入的样式文件不在同一个目录下的时候就会崩掉。现在所有使用相对资源的路径都能找到了。
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。
相关阅读 >>
浅谈Angular中elem.scope()、elem.isolatescope和$compile(elem)(scope)中scope的区别
浅谈Angular中的模块(ngmodule)，延迟加载模块
聊聊Angular项目中将 .css 文件修改为 .scss 文件的方法
更多相关阅读请进入《Angular》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
