Cet article vous donnera une analyse approfondie d'Angular 10

Cet article vous amènera à explorer Angular 10 en profondeur. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

La dernière version d'Angular, Angular 10, vient de sortir. Jetons un coup d'œil à ses nouvelles fonctionnalités ! Cet article détaillera toutes les nouvelles fonctionnalités qui méritent d'être mentionnées dans la nouvelle version. Si vous souhaitez avoir un aperçu rapide de ce qui est inclus, vous pouvez vous rendre sur le Blog officiel d'Angular pour le consulter.

Angular 10 est sorti 4 mois après la sortie d'Angular 9. Avec un intervalle de temps aussi court, il n'y a bien sûr pas beaucoup de changements, mais cette version a encore quelques nouveautés qui méritent d'être mentionnées et de nombreux défauts ont été corrigés. . D'ailleurs, l'équipe Angular souhaite sortir 2 versions majeures par an, donc Angular 11 devrait sortir cet automne. [Recommandations de didacticiel associées : "tutoriel angulaire"]

Prend en charge TypeScript 3.9.x

En tant que personne qui aime TypeScript, je pense que cette version La fonctionnalité la plus bienvenue est la prise en charge de TypeScript 3.9.x ! En revanche, Angular 10 a abandonné le support des TS 3.6, 3.7 et 3.8, ce qui, je l'espère, ne sera pas un obstacle pour vous. Basée sur la mise à niveau de la CLI du compilateur et la prise en charge de TS3.9, la vérification de type d'Angular 10 est plus rapide que les versions précédentes, ce qui est une bonne nouvelle pour la plupart des projets, en particulier les grands projets.

De plus, Angular 10 a également été mis à niveau vers TSLib 2.0. TSLib est simplement une bibliothèque officielle qui fournit des méthodes de support d'exécution TypeScript. Elle prend effet en conjonction avec la balise importHelpers dans "tsconfig.json". Lorsque importHelpers est activé, le compilateur peut générer un code lisible plus compact et plus fiable. . Bref, ne vous inquiétez pas, TSLib n'a pas beaucoup changé.

Paramètres stricts facultatifs

Le mode strict est une victoire !

Le mode strict d'Angular 10 nous permet d'obtenir un projet strict lorsque nous le créons. C'est une bonne pratique et mérite d'être utilisée sur tous les nouveaux projets. Exécutez la dénomination suivante pour créer un projet strictement configuré :

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 'ModuleWithProviders8742468051c85b06f0a0af9e3e506b5c' requires 1 type argument(s).

Il est recommandé de contacter l'auteur pour résoudre ce problème, car NGCC ne peut pas non plus le gérer. Vous pouvez également l'ignorer en définissant d'abord skipLibChecks sur false.

Autres changements majeurs

• Résolveur : Renvoyer VIDE annulera la navigation. Si vous souhaitez que la navigation se termine avec succès, vous devez vous assurer que le résolveur a bien fonctionné. une valeur de retour.
• Service Worker : l'implémentation de Service Worker qui s'appuie sur des ressources avec des en-têtes différents est différente d'avant, et les différents en-têtes seront ignorés. Il est recommandé d'éviter de mettre en cache de telles ressources, car cela pourrait entraîner un comportement imprévisible de l'agent utilisateur. Par conséquent, l’en-tête de ressource peut être vérifié même s’il n’est pas utilisé. Les options de correspondance de cache peuvent être configurées dans le fichier de configuration VGSW.
• Liaison d'attribut : par exemple, [foo]=(bar$ | async).fubar, si la valeur de fubar est la même qu'avant, la détection de changement ne sera pas déclenchée. Si vous souhaitez déclencher la détection des modifications, une solution de contournement consiste à effectuer la modification complète de la référence.
• 时间日期格式化：formatDate() et DatePipe 的格式化代码改了，之前的实现对于跨午夜的日期范围有问题
• UrlMatcher背后的方法utility type现在的返回类似可以是null
• ExpressionChangedAfterItHasBeenChecked 的报错新增了之前没检测到的场景
• Angular日志：模板里的未知元素/属性绑定从以前的warning输出级别提升到error输出级别
• Formulaire réactif : Là est un bug de contrôle de formulaire lorsque valueChanges est lié à une entrée de type numéro. Désormais, la zone de saisie de numéro n'écoute plus l'événement de changement, mais l'événement d'entrée. Pensez à modifier vos exemples de tests. Cela rompt également la compatibilité d'IE9, mais cela n'a aucun impact. Validateurs
• minLength et maxLength : sa valeur est garantie de contenir un attribut de longueur de type numérique. Auparavant, des valeurs fausses sans attribut de longueur provoquaient des erreurs de validation.

Migration

Référence迁移指南 : https://update.angular.io/#9.0:10.0l3

Résumé

Cet article explore les nouvelles fonctionnalités, les fonctionnalités obsolètes et les changements majeurs d'Angular 10. Bien que cette version ne soit pas une version sismique, elle a corrigé de nombreux défauts et apporté de nombreux trésors. Merci à l'équipe et à la communauté Angular !

Adresse originale : https://medium.com/javascript-in-plain-english/angular-10-in-owned-a48a3a7dd1a7

Auteur : Flavio Copes

Traducteur : éditeur Xiao

Pour plus de connaissances liées à la programmation, veuillez visiter : Vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!