In diesem Artikel erhalten Sie eine ausführliche Analyse von Angular 10

In diesem Artikel erfahren Sie mehr über Angular 10. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Die neueste Version von Angular, Angular 10, wurde gerade veröffentlicht. Mal sehen, welche neuen Funktionen sie bietet! In diesem Artikel werden alle erwähnenswerten neuen Funktionen der neuen Version detailliert beschrieben. Wenn Sie schnell eine Vorschau der enthaltenen Funktionen erhalten möchten, können Sie diese im „offiziellen Angular-Blog“ nachlesen. Angular 10 wurde 4 Monate nach der Veröffentlichung von Angular 9 veröffentlicht. Natürlich gibt es nicht viele Änderungen, aber diese Version verfügt dennoch über einige erwähnenswerte neue Funktionen und viele Mängel wurden behoben. Das Angular-Team möchte übrigens zwei Hauptversionen pro Jahr veröffentlichen, daher soll Angular 11 diesen Herbst erscheinen. [Verwandte Tutorial-Empfehlung: „

Angular-Tutorial

“]

Unterstützt TypeScript 3.9.x

Als Person, die TypeScript liebt, denke ich, dass die beliebteste Funktion dieser Version darin besteht, dass sie TypeScript 3.9.x unterstützt! Andererseits hat Angular 10 die Unterstützung für TS 3.6, 3.7 und 3.8 eingestellt, was hoffentlich kein Hindernis für Sie darstellt. Aufgrund des Upgrades der Compiler-CLI und der Unterstützung für TS3.9 ist die Typprüfung von Angular 10 schneller als in früheren Versionen, was für die meisten Projekte, insbesondere für große Projekte, eine gute Nachricht ist.

Darüber hinaus wurde Angular 10 auch auf TSLib 2.0 aktualisiert. TSLib ist einfach eine offizielle Bibliothek, die TypeScript-Laufzeitunterstützungsmethoden bereitstellt. In Kombination mit

in „tsconfig.json“ kann der Compiler kompakteren und lesbareren Code generieren. Kurz gesagt, keine Sorge, an TSLib hat sich nicht viel geändert.

importHelpers标记生效，当importHelpers

Optionale strenge Einstellungen

Der strenge Modus ist ein Gewinn!

Der strikte Modus von Angular 10 ermöglicht es uns, ein striktes Projekt zu erstellen, wenn wir es erstellen. Dies ist eine gute Vorgehensweise und es lohnt sich, sie bei allen neuen Projekten anzuwenden. Führen Sie die folgende Benennung aus, um ein streng konfiguriertes Projekt zu erstellen:

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).

Es wird empfohlen, sich zur Reparatur an den Autor zu wenden, da NGCC damit nicht umgehen kann. Sie können skipLibChecks auch zuerst auf „false“ setzen, um es zu überspringen. 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值会引起验证错误。

迁移

参考迁移指南

Weitere wichtige Änderungen

• Resolver: Wenn Sie EMPTY zurückgeben, wird die Navigation abgebrochen. Wenn Sie möchten, dass die Navigation erfolgreich abgeschlossen wird, müssen Sie sicherstellen dass der Resolver einen Wert zurückgibt.
• Service Worker: Die Implementierung von Service Worker, die auf Ressourcen mit unterschiedlichen Headern basiert, unterscheidet sich von zuvor und unterschiedliche Header werden ignoriert. Es wird empfohlen, das Zwischenspeichern solcher Ressourcen zu vermeiden, da dies zu unvorhersehbarem Verhalten des Benutzeragenten führen kann. Dadurch kann der Ressourcenheader auch dann überprüft werden, wenn er nicht verwendet wird. Cache-Matching-Optionen können in der VGSW-Konfigurationsdatei konfiguriert werden.
• Attributbindung: Zum Beispiel [foo]=(bar$ | async).fubar Wenn der Wert von fubar derselbe ist wie zuvor, wird die Änderung erkannt wird nicht ausgelöst. Wenn Sie die Änderungserkennung auslösen möchten, können Sie dieses Problem umgehen, indem Sie die gesamte Referenzänderung vornehmen.
• Zeit- und Datumsformatierung: formatDate() und DatePipe-Formatierungscodes wurden geändert. Die vorherige Implementierung hatte Probleme mit Datumsbereichen, die sich über Mitternacht erstreckten
• Der Methoden-Dienstprogrammtyp hinter UrlMatcher kann jetzt null zurückgeben
• Der Fehlerbericht von ExpressionChangedAfterItHasBeenChecked fügt ein neues Szenario hinzu, das vor dem-Code nicht erkannt wurde >
• Angular-Protokoll: Unbekannte Element-/Attributbindung in der Vorlage wird von der vorherigen Warnungsausgabeebene auf Fehlerausgabeebene aktualisiert
• Antwortformular: Es gibt Ein Fehler bei der Formularsteuerung, wenn valueChanges an eine Eingabe vom Typ Zahl gebunden ist. Jetzt hört das Eingabefeld von Zahl nicht mehr auf das Änderungsereignis, sondern auf das Eingabeereignis. Denken Sie daran, Ihre Testbeispiele zu ändern. Dadurch wird auch die Kompatibilität von IE9 beeinträchtigt, es hat jedoch keine Auswirkungen.
• minLength- und maxLength-Validatoren: Sein Wert enthält garantiert das Längenattribut des numerischen Typs. Zuvor falsche Werte ohne das Längenattribut würde zu Validierungsfehlern führen.

Migration

Siehe Migrationsleitfaden: https://update.angular.io/#9.0: 10.0 l3

Zusammenfassung

In diesem Artikel werden die neuen Funktionen, veralteten Funktionen und wichtigen Änderungen in Angular 10 erläutert. Obwohl es sich bei dieser Version nicht um einen seismischen Blockbuster handelt, hat sie viele Fehler behoben und viele Schätze mit sich gebracht. Vielen Dank an das Angular-Team und die Community!

Originaladresse: https://medium.com/javascript-in-plain-english/angular-10-in- Depth-a48a3a7dd1a7

Autor: Flavio Copes

Übersetzer: Xiaobian🎜🎜🎜Mehr Programmierung Für verwandte Kenntnisse , besuchen Sie bitte: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonIn diesem Artikel erhalten Sie eine ausführliche Analyse von Angular 10. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!