Heim > Web-Frontend > js-Tutorial > Eine kurze Diskussion der neuen Funktionen in Angular10

Eine kurze Diskussion der neuen Funktionen in Angular10

青灯夜游
Freigeben: 2021-04-07 10:16:25
nach vorne
2511 Leute haben es durchsucht

Dieser Artikel führt Sie durch die neuen Funktionen in Angular10. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Eine kurze Diskussion der neuen Funktionen in Angular10

Angular 10 ist ein großes Upgrade des beliebten Webentwicklungs-Frameworks und ist normalerweise am 24. Juni als offizielle Version verfügbar. Das offizielle Versions-Upgrade basiert auf dem von Google entwickelten TypeScript-basierten Framework, das sich mehr auf Qualität, Tools und Funktionen zur Verbesserung des Ökosystems konzentriert als die neue Version.

Angular 10 ist kleiner als frühere Angular-Versionen. Zu den neuen Funktionen gehören eine neue Datumsbereichsauswahl und CommonJS-Importwarnungen in der Angular Material UI-Komponentenbibliothek. CommonJS-Importwarnungen machen Entwickler darauf aufmerksam, wenn mit CommonJS gepackte Abhängigkeiten verwendet werden, die zu größeren, langsameren Anwendungen führen könnten, sodass Entwickler ECMAScript-Modulpakete ersetzen können.

Verwandte Tutorial-Empfehlungen: „angular Tutorial

Darüber hinaus bieten die optionalen strengen Einstellungen strengere Projekteinstellungen beim Erstellen eines neuen Arbeitsbereichsng new ,通过ng new -- strict. Durch die Aktivierung dieses Flags werden neue Projekte mit neuen Einstellungen initialisiert, um die Wartbarkeit zu verbessern, Fehler zu erkennen und der CLI die Durchführung erweiterter Optimierungen an der Anwendung zu ermöglichen.

Wo Sie Angular 10 herunterladen können


Die allgemeine Version von Angular 10 finden Sie auf GitHub. Um Ihre aktuelle Angular-Installation zu aktualisieren, können Sie den folgenden Befehl ausführen:

ng update @angular/cli @angular/core
Nach dem Login kopieren

Neue Funktionen in Angular 10


Zu den Hauptfunktionen von Angular 10 gehören:

  • TSlib, die TypeScript-Laufzeitbibliothek einschließlich Hilfsfunktionen, wurde auf TSlib 2.0 aktualisiert. Das statische Analysetool TSLint für TypeScript wurde auf TSLint 6 aktualisiert.
  • Eine Compiler-Schnittstelle hinzugefügt, die den eigentlichen NGTSC-Compiler umschließt. Der sprachdienstspezifische Compiler verwendet die Projektschnittstelle, um mehrere Typprüfungsdateien zu verwalten und nach Bedarf Scriptinfos zu erstellen.
  • Die Browserkonfiguration des neuen Projekts wurde aktualisiert, um ältere, weniger genutzte Browser auszuschließen. Internet Explorer 9, Internet Explorer 10 und Internet Explorer Mobile werden nicht unterstützt.
  • Das Angular-Paketformat enthält keine ESM5- oder FESM5-Pakete mehr, was beim Ausführen von yarn oder npm install für Angular-Pakete und -Bibliotheken Download- und Installationszeit spart. yarnnpm install时,节省了下载和安装时间。
  • 对于编译器,已为属性读取和方法调用添加了名称范围。
  • EntryPointFinder ,这是一个基于程序的入口点查找器,可以从tsjconfig.json文件指定的程序中的导入中获得种子。 当活动程序仅导入一小部分已安装的入口点时,这预计会比DirectoryWalkerEntryPointFinder更快。
  • 由于具有可疑的价值和性能问题,自动完成功能已从HTML实体(如&amp )中删除。
  • 显式映射从闭包公开到devmode文件。 此功能针对必须将生产构建输入转换为等效devmode的开发工具。
  • 一项重大更改是,将ModuleWithProviders强制ModuleWithProviders 。 为了使ModuleWithProviders模式与Ivy编译和渲染管道一起使用,需要使用通用类型参数,但是在此提交之前,View Engine允许省略通用类型。 如果开发人员使用不带泛型类型的ModuleWithProviders ,则版本10迁移将更新代码。 但是,如果开发人员使用View Engine并依赖于忽略泛型类型的库,则会发出构建错误。 在这种情况下,ngcc将无济于事,迁移将仅涵盖应用程序代码。 应该与图书馆作者联系以修复他们的图书馆。 解决方法是,可以在tsconfig中将skipLibChecks设置为false或将应用程序更新为仅使用Ivy。
  • 现在具有TypeScript 3.9的功能,并且删除了对TypeScript 3.8的支持。 这是一个重大变化。 也不再支持TypeScript 3.6和TypeScript 3.7。
  • 类型检查的性能已改进到编译器cli。
  • 为了提高性能,已对basePaths的计算进行了延迟,因此仅在TargetedEntryPointFinder需要时才进行工作。 以前,每当实例化查找程序时都会计算basePaths ,这在已经处理了目标入口点的情况下浪费了精力。
  • 支持合并多个翻译文件。 以前,每个语言环境仅允许一个翻译文件。 现在,用户可以在每个语言环境中指定多个文件,并且每个文件的事务都将通过消息传递ID合并。
  • 可以配置异步锁定超时。 这增加了对ngcc.config.js文件的支持,用于设置retryAttemptsretryDelay选项。 集成测试添加了新的超时检查,并使用ngcc.config.js减少了超时时间,以防止测试花费太长时间。
  • 在一项重大更改中,有关未知元素的警告现在记录为错误。 虽然这不会破坏应用程序,但它可能会触发一些期望通过console.error不记录任何内容的工具。
  • 在另一个重大更改中,任何返回EMPTY解析器都将取消导航。 为了使导航继续进行,开发人员必须更新解析器以更新某些值,例如default!Empty
  • 在元数据中添加了依赖项信息和ng-content选择器。 提议的编译器功能将提供对诸如Angular Language Service之类的工具有用的附加元数据,并具有为库中定义的指令/组件提供建议的能力。
  • 通过减小入口点清单的大小和清单中的缓存技术来实现性能改进。 另外,依赖项的缓存是在入口点清单中完成的,并从那里读取,而不是每次都进行计算。 以前,即使不需要处理入口点,ngcc(Angular Ivy兼容性编译器)也将解析入口点的文件以计算依赖关系,这对于large_node模块将花费大量时间。
  • 为了提高ngcc性能,现在允许立即报告陈旧的锁定文件。 此外,还将存储已解析的tsconfig文件的缓存副本,如果tsconfig路径相同,则可以重复使用该副本。
  • 在一项重大更改中,逻辑已更新,涉及格式化午夜的白天。 当使用bB格式代码格式化时间时,呈现的字符串不能正确处理跨越几天的白天。 相反,逻辑回落到AM的默认情况。 此逻辑已更新,因此它可以匹配在午夜之后的一天中的时间,因此它现在将呈现正确的输出,例如at night英语的at night🎜Für den Compiler wurden Namensbereiche zum Lesen von Eigenschaften und zum Aufrufen von Methoden hinzugefügt. 🎜🎜EntryPointFinder, ein programmbasierter Einstiegspunktfinder, der aus Importen in dem durch die Datei tsjconfig.json angegebenen Programm geseed werden kann. Es wird erwartet, dass dies schneller ist als DirectoryWalkerEntryPointFinder, wenn das aktive Programm nur eine kleine Teilmenge der installierten Einstiegspunkte importiert. 🎜🎜Autocomplete wurde aus HTML-Entitäten wie &amp aufgrund fragwürdiger Wert- und Leistungsprobleme entfernt. 🎜🎜 Explizite Zuordnung von der Schließungsfreigabe zur Devmode-Datei. Diese Funktion zielt auf Entwicklungstools ab, die Produktions-Build-Eingaben in den entsprechenden Devmode konvertieren müssen. 🎜🎜Eine bahnbrechende Änderung besteht darin, ModuleWithProviders obligatorisch zu machen. Damit das ModuleWithProviders-Muster mit der Ivy-Kompilierungs- und Rendering-Pipeline funktioniert, sind generische Typparameter erforderlich. Bis zu dieser Übermittlung lässt View Engine jedoch zu, dass generische Typen weggelassen werden. Wenn Entwickler ModuleWithProviders ohne generische Typen verwenden, wird der Code durch Migrationen der Version 10 aktualisiert. Wenn ein Entwickler jedoch View Engine verwendet und sich auf eine Bibliothek verlässt, die generische Typen ignoriert, wird ein Build-Fehler ausgegeben. In diesem Fall hilft ngcc nicht und die Migration erstreckt sich nur auf den Anwendungscode. Bibliotheksautoren sollten kontaktiert werden, um ihre Bibliotheken zu reparieren. Um dieses Problem zu umgehen, können Sie „skipLibChecks“ in tsconfig auf „false“ setzen oder die Anwendung so aktualisieren, dass sie nur Ivy verwendet. 🎜🎜Verfügt jetzt über TypeScript 3.9 und die Unterstützung für TypeScript 3.8 wurde entfernt. Das ist eine große Veränderung. TypeScript 3.6 und TypeScript 3.7 werden ebenfalls nicht mehr unterstützt. 🎜🎜Die Leistung der Typprüfung der Compiler-CLI wurde verbessert. 🎜🎜Um die Leistung zu verbessern, wurde die Berechnung von basePaths zurückgestellt, sodass die Arbeit nur dann ausgeführt wird, wenn TargetedEntryPointFinder sie benötigt. Bisher wurde basePaths immer dann berechnet, wenn ein Finder instanziiert wurde, was Aufwand verschwendete, wenn der Zieleinstiegspunkt bereits verarbeitet wurde. 🎜🎜Unterstützt das Zusammenführen mehrerer Übersetzungsdateien. Bisher war nur eine Übersetzungsdatei pro Gebietsschema zulässig. Benutzer können jetzt mehrere Dateien pro Gebietsschema angeben und Transaktionen für jede Datei werden nach Nachrichten-ID zusammengeführt. 🎜🎜Asynchrones Sperrzeitlimit kann konfiguriert werden. Dies fügt Unterstützung für die Datei ngcc.config.js zum Festlegen der Optionen retryAttempts und retryDelay hinzu. Für Integrationstests wurden neue Timeout-Prüfungen hinzugefügt und Timeouts mithilfe von ngcc.config.js reduziert, um zu verhindern, dass Tests zu lange dauern. 🎜🎜In einer bahnbrechenden Änderung werden Warnungen über unbekannte Elemente jetzt als Fehler protokolliert. Dadurch wird die Anwendung zwar nicht beschädigt, es können jedoch einige Tools ausgelöst werden, die erwarten, dass nichts über console.error protokolliert wird. 🎜🎜In einer weiteren wichtigen Änderung bricht jeder Parser, der EMPTY zurückgibt, die Navigation ab. Damit die Navigation fortgesetzt werden kann, muss der Entwickler den Parser aktualisieren, um bestimmte Werte zu aktualisieren, z. B. default!Empty. 🎜🎜Abhängigkeitsinformationen und NG-Content-Selektor in Metadaten hinzugefügt. Die vorgeschlagene Compiler-Funktion stellt zusätzliche Metadaten bereit, die für Tools wie Angular Language Service nützlich sind, und bietet die Möglichkeit, Vorschläge für in der Bibliothek definierte Anweisungen/Komponenten bereitzustellen. 🎜🎜Leistungsverbesserungen durch reduzierte Größe des Einstiegspunktmanifests und Caching-Techniken im Manifest. Außerdem erfolgt die Zwischenspeicherung von Abhängigkeiten im Einstiegspunktmanifest und wird von dort gelesen, anstatt sie jedes Mal neu zu berechnen. Selbst wenn der Einstiegspunkt bisher nicht verarbeitet werden musste, analysierte ngcc (Angular Ivy Compatibility Compiler) die Datei des Einstiegspunkts, um Abhängigkeiten zu berechnen, was für Large_node-Module viel Zeit in Anspruch nehmen würde. 🎜🎜Um die Leistung von ngcc zu verbessern, ist jetzt die sofortige Meldung veralteter Sperrdateien zulässig. Darüber hinaus wird eine zwischengespeicherte Kopie der analysierten tsconfig-Datei gespeichert, die wiederverwendet werden kann, wenn der tsconfig-Pfad derselbe ist. 🎜🎜Eine wesentliche Änderung besteht darin, dass die Logik aktualisiert wurde und die Tageszeit für Mitternacht formatiert wird. Beim Formatieren einer Uhrzeit mit den Formatcodes b oder B verarbeitet die gerenderte Zeichenfolge Tage, die sich über mehrere Tage erstrecken, nicht korrekt. Stattdessen greift die Logik auf den Standardfall von AM zurück. Diese Logik wurde aktualisiert, sodass sie der Tageszeit nach Mitternacht entspricht, sodass nun die korrekte Ausgabe angezeigt wird, z. B. at night in Englisch.Verwenden Sie formatDate()DatePipebB格式代码的应用程序将受到此更改的影响。
  • 对于路由器, CanLoad保护器现在可以返回Urltree 。 返回UrltreeCanLoad防护Urltree取消当前导航并重定向。 这与CanActivate守卫可用的当前行为匹配,该行为也已添加。 这不会影响预加载。 CanLoad保护程序会阻止任何预加载; 带有CanLoad防护的任何路由都不会被预加载,并且防护也不会作为预加载的一部分执行。
  • 微语法表达式的ExpressionBinding与ParsedProperty的ExpressionBinding中正确值范围的传播,这又会将范围传播到模板AST(VE和Ivy)。 该建议也适用于编译器。
  • 在对内核的修复中,会将逻辑添加到未修饰的类迁移中,以修饰使用Angular功能的未修饰类的派生类。
  • 在重大更改中,Urlmatcher的类型将反映出它始终可以返回null。
  • 对于服务人员,已修复了一种情况,即当任务长期运行或超时时,服务人员可能永远不会注册。
  • 已经进行了许多错误修复,包括编译器避免了有Kong数组中未定义的表达式,以及内核避免了导入不存在的符号时的迁移错误 。 在Terser内联bug的核心中也有一种解决方法。 另一个错误修复程序正确地标识了受TestBed中的替代影响的模块 。
  • Angular NPM不再包含某些jsdoc注释来支持Closure Compiler的高级优化。 这是一个重大变化。 软件包中对Closure Compiler的支持已经试验并中断了一段时间。 使用Closure Compiler的任何人最好直接使用从源代码构建的Angular软件包,而不是使用NPM上发布的版本。 作为临时的解决方法,用户可以考虑将其当前的构建管道与Closure标志--compilation_level=SIMPLE. Dieses Flag stellt sicher, dass die Build-Pipeline baubare, ausführbare Artefakte erzeugt, jedoch mit einer erhöhten Nutzlastgröße, da die erweiterte Optimierung deaktiviert ist.

Übersetzt von: https://www.infoworld.com/article/3537449/whats-new-in-angular-10.html

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion der neuen Funktionen in Angular10. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage