suchen
HeimWeb-Frontendjs-TutorialEine 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.

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

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!

Stellungnahme
Dieser Artikel ist reproduziert unter:csdn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
JavaScript -Engines: Implementierungen vergleichenJavaScript -Engines: Implementierungen vergleichenApr 13, 2025 am 12:05 AM

Unterschiedliche JavaScript -Motoren haben unterschiedliche Auswirkungen beim Analysieren und Ausführen von JavaScript -Code, da sich die Implementierungsprinzipien und Optimierungsstrategien jeder Engine unterscheiden. 1. Lexikalanalyse: Quellcode in die lexikalische Einheit umwandeln. 2. Grammatikanalyse: Erzeugen Sie einen abstrakten Syntaxbaum. 3. Optimierung und Kompilierung: Generieren Sie den Maschinencode über den JIT -Compiler. 4. Führen Sie aus: Führen Sie den Maschinencode aus. V8 Engine optimiert durch sofortige Kompilierung und versteckte Klasse.

Jenseits des Browsers: JavaScript in der realen WeltJenseits des Browsers: JavaScript in der realen WeltApr 12, 2025 am 12:06 AM

Zu den Anwendungen von JavaScript in der realen Welt gehören die serverseitige Programmierung, die Entwicklung mobiler Anwendungen und das Internet der Dinge. Die serverseitige Programmierung wird über node.js realisiert, die für die hohe gleichzeitige Anfrageverarbeitung geeignet sind. 2. Die Entwicklung der mobilen Anwendungen erfolgt durch reaktnative und unterstützt die plattformübergreifende Bereitstellung. 3.. Wird für die Steuerung von IoT-Geräten über die Johnny-Five-Bibliothek verwendet, geeignet für Hardware-Interaktion.

Erstellen einer SaaS-Anwendung mit mehreren Mietern mit Next.js (Backend Integration)Erstellen einer SaaS-Anwendung mit mehreren Mietern mit Next.js (Backend Integration)Apr 11, 2025 am 08:23 AM

Ich habe eine funktionale SaaS-Anwendung mit mehreren Mandanten (eine EdTech-App) mit Ihrem täglichen Tech-Tool erstellt und Sie können dasselbe tun. Was ist eine SaaS-Anwendung mit mehreren Mietern? Mit Multi-Tenant-SaaS-Anwendungen können Sie mehrere Kunden aus einem Sing bedienen

So erstellen Sie eine SaaS-Anwendung mit mehreren Mietern mit Next.js (Frontend Integration)So erstellen Sie eine SaaS-Anwendung mit mehreren Mietern mit Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AM

Dieser Artikel zeigt die Frontend -Integration mit einem Backend, das durch die Genehmigung gesichert ist und eine funktionale edtech SaaS -Anwendung unter Verwendung von Next.js. erstellt. Die Frontend erfasst Benutzerberechtigungen zur Steuerung der UI-Sichtbarkeit und stellt sicher, dass API-Anfragen die Rollenbasis einhalten

JavaScript: Erforschung der Vielseitigkeit einer WebspracheJavaScript: Erforschung der Vielseitigkeit einer WebspracheApr 11, 2025 am 12:01 AM

JavaScript ist die Kernsprache der modernen Webentwicklung und wird für seine Vielfalt und Flexibilität häufig verwendet. 1) Front-End-Entwicklung: Erstellen Sie dynamische Webseiten und einseitige Anwendungen durch DOM-Operationen und moderne Rahmenbedingungen (wie React, Vue.js, Angular). 2) Serverseitige Entwicklung: Node.js verwendet ein nicht blockierendes E/A-Modell, um hohe Parallelitäts- und Echtzeitanwendungen zu verarbeiten. 3) Entwicklung von Mobil- und Desktop-Anwendungen: Die plattformübergreifende Entwicklung wird durch reaktnative und elektronen zur Verbesserung der Entwicklungseffizienz realisiert.

Die Entwicklung von JavaScript: Aktuelle Trends und ZukunftsaussichtenDie Entwicklung von JavaScript: Aktuelle Trends und ZukunftsaussichtenApr 10, 2025 am 09:33 AM

Zu den neuesten Trends im JavaScript gehören der Aufstieg von Typenkripten, die Popularität moderner Frameworks und Bibliotheken und die Anwendung der WebAssembly. Zukunftsaussichten umfassen leistungsfähigere Typsysteme, die Entwicklung des serverseitigen JavaScript, die Erweiterung der künstlichen Intelligenz und des maschinellen Lernens sowie das Potenzial von IoT und Edge Computing.

Entmystifizieren JavaScript: Was es tut und warum es wichtig istEntmystifizieren JavaScript: Was es tut und warum es wichtig istApr 09, 2025 am 12:07 AM

JavaScript ist der Eckpfeiler der modernen Webentwicklung. Zu den Hauptfunktionen gehören eine ereignisorientierte Programmierung, die Erzeugung der dynamischen Inhalte und die asynchrone Programmierung. 1) Ereignisgesteuerte Programmierung ermöglicht es Webseiten, sich dynamisch entsprechend den Benutzeroperationen zu ändern. 2) Die dynamische Inhaltsgenerierung ermöglicht die Anpassung der Seiteninhalte gemäß den Bedingungen. 3) Asynchrone Programmierung stellt sicher, dass die Benutzeroberfläche nicht blockiert ist. JavaScript wird häufig in der Webinteraktion, der einseitigen Anwendung und der serverseitigen Entwicklung verwendet, wodurch die Flexibilität der Benutzererfahrung und die plattformübergreifende Entwicklung erheblich verbessert wird.

Ist Python oder JavaScript besser?Ist Python oder JavaScript besser?Apr 06, 2025 am 12:14 AM

Python eignet sich besser für Datenwissenschaft und maschinelles Lernen, während JavaScript besser für die Entwicklung von Front-End- und Vollstapel geeignet ist. 1. Python ist bekannt für seine prägnante Syntax- und Rich -Bibliotheks -Ökosystems und ist für die Datenanalyse und die Webentwicklung geeignet. 2. JavaScript ist der Kern der Front-End-Entwicklung. Node.js unterstützt die serverseitige Programmierung und eignet sich für die Entwicklung der Vollstapel.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
4 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Herunterladen der Mac-Version des Atom-Editors

Herunterladen der Mac-Version des Atom-Editors

Der beliebteste Open-Source-Editor

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Leistungsstarke integrierte PHP-Entwicklungsumgebung

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

WebStorm-Mac-Version

WebStorm-Mac-Version

Nützliche JavaScript-Entwicklungstools

VSCode Windows 64-Bit-Download

VSCode Windows 64-Bit-Download

Ein kostenloser und leistungsstarker IDE-Editor von Microsoft