This article will give you an in-depth analysis of Angular 10

This article will take you to explore in depthAngular 10. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

The latest version of Angular, Angular 10, has just been released. Let’s take a look at what new features it has! This article will detail all the new features worth mentioning in the new version. If you want to quickly preview what is included, you can go to Angular Official Blog to check it out.

Angular 10 was released 4 months after Angular 9 was released. With such a short time interval, of course there are not many changes, but this version still has some new features worth mentioning and many defects have been fixed. . By the way, the Angular team wants to release 2 major versions per year, so Angular 11 should be released this fall. [Related tutorial recommendations: "angular tutorial"]

Supports TypeScript 3.9.x

As a person who loves TypeScript, I think this version is the most A welcome feature is support for TypeScript 3.9.x! On the other hand, Angular 10 has dropped support for TS 3.6, 3.7 and 3.8, which I hope will not be an obstacle for you. Based on the upgrade of the compiler CLI and support for TS3.9, Angular 10's type checking is faster than previous versions, which is good news for most projects, especially large projects.

In addition, Angular 10 has also been upgraded to TSLib 2.0. TSLib is simply an official library that provides TypeScript runtime support methods. It takes effect in conjunction with the importHelpers tag in "tsconfig.json". When importHelpers is turned on, the compiler Can produce more compact, more readable code. In short, don't worry, TSLib hasn't changed much.

Optional strict settings

Strict mode is a win!

Angular 10’s strict mode allows us to get a strict project when we create it. This is a good practice and worth using on all new projects. Run the following naming to create a strictly configured project:

ng new --strict

它可以让你更快地检测到问题的存在（在构建时发现问题总比运行时发现问题好，对吧）。这个新的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浏览器，可以在你的项目里执行下面的命令：

npx browserslist

它会基于根目录下的 “.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。

IE 9、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 &#39;ModuleWithProviders<T>&#39; requires 1 type argument(s).

It is recommended to contact the author for repair, because NGCC cannot handle it. You can also skip it by setting skipLibChecks to false first.

Other major changes

• Resolver: Returning EMPTY will cancel the navigation. If you want the navigation to be completed successfully, you must ensure that the resolver has a return value.
• Service worker: The implementation of Service worker that relies on resources with different headers is different from before, and different headers will be ignored. It is recommended to avoid caching such resources, which may cause unpredictable behavior of the user agent. As a result, the resource header can be checked even if it is not used. Cache matching options can be configured in the VGSW configuration file.
• Attribute binding: For example, [foo]=(bar$ | async).fubarIn this way, if the value of fubar is the same as before, change detection will not be triggered. If you want to trigger change detection, a workaround is to make the entire reference change.
• Time and date formatting: formatDate() and DatePipe formatting code has been changed. The previous implementation had problems with the date range spanning midnight
• The method utility type behind UrlMatcher can now return something like null
• The error report of ExpressionChangedAfterItHasBeenChecked has added a scenario that was not detected before
• Angular log: The unknown element/attribute binding in the template is raised from the previous warning output level to the error output level
• Responsive form: valueChanges is bound to an input of type number. A bug in form control. Now the number input box no longer listens to the change event, but to the input event. Remember to modify your test examples. This also breaks the compatibility of IE9, but it has no impact.
• minLength and maxLength validators: Its value is guaranteed to contain a length attribute of numeric type. Previously falsy values ​​without a length attribute would cause validation errors.

Migration

ReferenceMigration Guide: https://update.angular.io/#9.0:10.0l3

Summary

This article explores the new features, deprecated features, and major changes in Angular 10. Although this version is not a seismic blockbuster release, it has fixed many bugs and brought many treasures. Thanks to the Angular team and community!

Original address: https://medium.com/javascript-in-plain-english/angular-10-in-depth-a48a3a7dd1a7

Author: Flavio Copes

Translator: Xiaobian

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of This article will give you an in-depth analysis of Angular 10. For more information, please follow other related articles on the PHP Chinese website!