Heim > Artikel > Web-Frontend > Eine kurze Diskussion der neuen Funktionen in Angular10
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.
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.
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
Zu den Hauptfunktionen von Angular 10 gehören:
yarn
oder npm install
für Angular-Pakete und -Bibliotheken Download- und Installationszeit spart. yarn
或npm install
时,节省了下载和安装时间。EntryPointFinder
,这是一个基于程序的入口点查找器,可以从tsjconfig.json文件指定的程序中的导入中获得种子。 当活动程序仅导入一小部分已安装的入口点时,这预计会比DirectoryWalkerEntryPointFinder
更快。&amp
)中删除。ModuleWithProviders
强制ModuleWithProviders
。 为了使ModuleWithProviders
模式与Ivy编译和渲染管道一起使用,需要使用通用类型参数,但是在此提交之前,View Engine允许省略通用类型。 如果开发人员使用不带泛型类型的ModuleWithProviders
,则版本10迁移将更新代码。 但是,如果开发人员使用View Engine并依赖于忽略泛型类型的库,则会发出构建错误。 在这种情况下,ngcc将无济于事,迁移将仅涵盖应用程序代码。 应该与图书馆作者联系以修复他们的图书馆。 解决方法是,可以在tsconfig中将skipLibChecks设置为false或将应用程序更新为仅使用Ivy。basePaths
的计算进行了延迟,因此仅在TargetedEntryPointFinder
需要时才进行工作。 以前,每当实例化查找程序时都会计算basePaths
,这在已经处理了目标入口点的情况下浪费了精力。retryAttempts
和retryDelay
选项。 集成测试添加了新的超时检查,并使用ngcc.config.js减少了超时时间,以防止测试花费太长时间。EMPTY
解析器都将取消导航。 为了使导航继续进行,开发人员必须更新解析器以更新某些值,例如default!Empty
。b
或B
格式代码格式化时间时,呈现的字符串不能正确处理跨越几天的白天。 相反,逻辑回落到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()
或DatePipe
或b
和B
格式代码的应用程序将受到此更改的影响。CanLoad
保护器现在可以返回Urltree
。 返回Urltree
的CanLoad
防护Urltree
取消当前导航并重定向。 这与CanActivate
守卫可用的当前行为匹配,该行为也已添加。 这不会影响预加载。 CanLoad
保护程序会阻止任何预加载; 带有CanLoad
防护的任何路由都不会被预加载,并且防护也不会作为预加载的一部分执行。--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!