Der Autor des Materials, dessen Übersetzung wir veröffentlichen, schlägt vor, über Angular 8 zu sprechen. Hier werden einige besonders wichtige Themen erörtert, die auf den Veranstaltungen von NgConf und Google I / O 2019 angesprochen wurden. Wenn Sie sich für Angular interessieren, aber aus irgendeinem Grund keine Berichte von gesehen haben Wir glauben, dass Sie neugierig sein werden, was Sie von Angular 8 erwarten können.
Wichtige Punkte
Ich bin sicher, dass Sie sich jetzt auf die Veröffentlichung von Angular 8 freuen. Sie erleben die gleichen Gefühle, die ich nach der NgConf 2019 erlebt habe. Der
Bericht von Igor Minar berührte viele erwartete Innovationen - von Werkzeugen bis zu Technologien wie Differenzialbelastung und vielen anderen wunderbaren Dingen.
Lassen Sie uns diskutieren, wie sich all dies auf Ihre Projekte auswirken kann. Wir werden nämlich neue Möglichkeiten in Betracht ziehen und darüber sprechen, ob ihr Auftreten dazu führen wird, dass veraltete bestehende Mechanismen erkannt werden oder dass das Neue mit dem Alten unvereinbar sein wird.
Neue Funktionen
▍ Differenzbelastung
Mithilfe der Differentialladetechnologie kann Angular während des Erstellungsprozesses eines Projekts ein separates Bündel für Polyfills erstellen.
browserlist hängt von der
browserlist . So wird es allgemein aussehen.
Oben ist eine neue Möglichkeit, Projekte zu packen ( Quelle )Durch die Verwendung dieser Funktion wird die Größe von Bundles reduziert.
Einsparungen durch Differenzbelastung ( Quelle )Wie funktioniert das?
Angular sammelt zusätzliche Polyfill-Dateien und diese werden mithilfe von
Nomodule- Attributen in den Code
eingebettet :
<body> <pp-root></pp-root> <script type="text/javascript" src="runtime.js"></script> <script type="text/javascript" src="es2015-polyfills.js" nomodule></script> <script type="text/javascript" src="polyfills.js"></script> <script type="text/javascript" src="styles.js"></script> <script type="text/javascript" src="vendor.js"></script> <script type="text/javascript" src="main.js"></script> </body>
Das
nomodule Attribut boolean verhindert, dass das Skript in Browsern
nomodule und ausgeführt wird, die ES6-Module unterstützen. Solche Browser ignorieren solche Skripte. Ältere Browser laden sie herunter und führen sie aus.
▍SVG-Vorlagen
Jetzt können SVG-Dateien als Vorlagen verwendet werden. Bisher konnte eingebettetes oder externes HTML als Vorlage verwendet werden.
@Component({ selector: "app-icon", templateUrl: "./icon.component.svg", styleUrls: ["./icon.component.css"] }) export class AppComponent {...}
Ich Ivy experimentelle Rendering-Engine
Der Ivy-Motor befindet sich noch in einem experimentellen Stadium. Nach der Veröffentlichung von Angular 8 können Sie es testen, indem
--enable-ivy beim Erstellen einer neuen Anwendung das
--enable-ivy . Der entsprechende Code wird unten angezeigt. Denken Sie daran, dass Ivy noch nicht ganz fertig ist (es befindet sich noch im Status "Opt-In-Vorschau"). Wie Igor Minar auf der NgConf 2019 sagte, wird weiterhin empfohlen, die View Engine beim Erstellen neuer Anwendungen zu verwenden.
Um die Verwendung von Ivy in einem vorhandenen Projekt zu aktivieren, müssen Sie den
enableIvy option angularCompilerOptions in
angularCompilerOptions in der
angularCompilerOptions auf
true angularCompilerOptions :
"angularCompilerOptions": {"enableIvy": true}
Sie können eine neue Anwendung erstellen, in der Ivy verwendet wird:
$ ng new my-app --enable-ivy
Ivy bietet die folgenden nützlichen Funktionen, von denen die ersten drei in Angular 9 erwartet werden:
- Schnellere Zusammenstellung.
- Verbesserte Typprüfung für Vorlagen.
- Reduzierung der Bündelgröße. Wenn Sie es noch nicht gesehen haben, eine Demonstration einer 4,3-KB-Anwendung mit Google I / O 19.
- Abwärtskompatibilität.
- Und meine Lieblingsfunktion ist das Debuggen von Vorlagen. Ich bin mir sicher, dass viele Entwickler wie ich dies brauchen.
▍Unterstützen Sie Bazel
Bazel ist ein weiteres Tool, das Google auf den Open Source-Markt verlagert hat. Laut Igor Minar wird Bazel seit langem für die internen Anforderungen des Unternehmens verwendet und steht nun allen zur Verfügung. Weitere Informationen zu diesem Projekt-Builder finden Sie in der
Dokumentation und in der Verwendung von Bazel mit
Angular .
Vielleicht fragen Sie sich jetzt, ob Bazel für den praktischen Gebrauch bereit ist. Beantworten Sie diese Frage kurz - sie ist noch nicht fertig. Jetzt befindet er sich im Status "Opt-In-Vorschau". Lassen Sie mich Alex Eagle zitieren, der das Angular-Tool-Entwicklungsteam bei Google leitet: „Wenn Sie bereits zuvor in die Bazel-Gewässer eingetreten sind, müssen Sie feststellen, dass es viele Haie gab ... Jetzt haben wir die Haie bereits verwaltet, aber das Wasser kann es immer noch sein kalt. "
Bazel wird noch ausgearbeitet, es wird erwartet, dass es in Version 9 in
@angular/cli .
Hier sind einige nützliche Funktionen, die Bazel uns bieten kann:
- Beschleunigung der Projektaufbauzeit. Der erste Build dauert einige Zeit, aber parallele Builds sind viel schneller. Angular verwendet bereits Bazel, und jetzt sind die CI-Routinen in 7,5 Minuten abgeschlossen, nicht in einer Stunde wie vor Bazel.
- Inkrementelle Projektmontage. Es wird möglich sein, nicht die gesamte Anwendung zu erfassen und bereitzustellen, sondern nur das, was sich daran geändert hat.
- Möglichkeit, mit Bazel-Dateien zu arbeiten, die standardmäßig ausgeblendet sind.
Sie können einem vorhandenen Projekt wie folgt Bazel-Unterstützung hinzufügen:
ng add @angular/bazel
Sie können mit Bazel eine neue Anwendung erstellen:
$ npm install -g @angular/bazel $ ng new my-app --collection=@angular/bazel
▍API Builder
Mit der neuen Version von Angular können Sie die API Builder verwenden, die auch als Architect bezeichnet werden. Angular verwendet Builder, um grundlegende Vorgänge auszuführen:
serve ,
build ,
test ,
lint und
e2e . Hier ist ein Beispiel mit Assemblern aus der Datei
angular.json :
... "projects": { "app-name": { ... "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", ... }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", ... }, "test": { "builder": "@angular-devkit/build-angular:karma", ... }, "lint": { "builder": "@angular-devkit/build-angular:tslint", ... }, "e2e": { "builder": "@angular-devkit/build-angular:protractor", ... } } } }
Jetzt können Sie Ihre eigenen Sammler erstellen. Ich sehe sie ähnlich wie die Schluck- / Grunzbefehle, die früher verwendet wurden.
Im Allgemeinen ist der Kollektor nur eine Funktion mit einer Reihe von Befehlen, die aus dem Paket
@angular-devkit/architect an die Methode
createBuilder() werden:
import { createBuilder } from '@angular-devkit/architect'; function customBuild(options, context) { return new Promise((resolve, reject) => {
Hier können Sie einen Blick auf die integrierten Angular Builder werfen.
Hier sind großartige Dinge über sie im Angular-Blog.
▍Ändert sich beim faulen Laden
Die neue Version von Angular wird auch eine neue Version des Systems des verzögerten Ladens von Modulen enthalten, deren Erscheinungsbild dazu führt, dass die vorhandene Syntax
loadChildren:string veraltet ist.
Bisher sah es so aus:
loadChildren: './lazy/lazy.module#LazyModule';
Mit der Veröffentlichung von Angular 8 - so:
loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
Wenn Sie bei der Arbeit viele Module haben, mit denen der Lazy-Loading-Mechanismus verwendet wird, und deren Übersetzung in eine neue Betriebsart automatisieren möchten, schauen Sie sich
dieses Material an.
▍Unterstützungs-API $ location AngularJS
Das Angular-Entwicklungsteam ist bestrebt, die Benutzer von AngularJS zu unterstützen und ihnen bei der Umstellung auf Angular zu helfen. Infolgedessen wurde dem System im Paket
angular/common/upgrade Unterstützung für den Dienst
$location hinzugefügt. Wir sprechen über die folgenden Funktionen:
- Abrufen des Status vom
$location Dienst. - Adressänderungen verfolgen.
- Abrufen der gleichen Informationen zu den Komponenten der Adresse, die in AngularJS abgerufen werden konnten (
hostname , protocol , port , search ). - Testen des Dienstes mithilfe der MockPlatformLocation-API.
EbWeb Worker
Angular 8 bietet Unterstützung für Web-Worker. Mit ihrer Hilfe können Sie die Hintergrundausführung von ressourcenintensivem Code organisieren. Um einen neuen Web Worker zu erstellen, können Sie den folgenden Befehl für die Angular-Befehlszeilenschnittstelle verwenden:
ng g webWorker <name>
▍Service Workers
Seit vor kurzem hat die Popularität progressiver Webanwendungen stark zugenommen, und es wurden viele Verbesserungen für Servicemitarbeiter vorgenommen. Eine dieser Verbesserungen war insbesondere das Hinzufügen des Parameters
SwRegistrationOptions . Eine weitere Verbesserung war die Unterstützung mehrerer Anwendungen in derselben Domäne.
Weitere Informationen zu Servicemitarbeitern finden Sie in
diesem Abschnitt der Angular-Dokumentation.
▍ Formularverbesserungen
Die Methode
markAllAsTouched wurde
markAllAsTouched , mit der Sie alle Elemente in einer
FormGroup als
touched markieren können. Dies ist sehr nützlich, wenn Sie die Validierung aller Steuerelemente in einer
FormGroup . Vorher wurde dasselbe wie folgt gemacht:
validateFormAndDisplayErrors(form: FormGroup) { Object.keys(form.controls).map((controlName) => { form.get(controlName).markAsTouched({onlySelf: true}); }); }
Im neuen Winkel können Sie mit der Methode
clear FormArray , wodurch alle Elemente daraus entfernt werden. Zuvor war es erforderlich, die folgende Konstruktion zu verwenden und das erste Element in jeder Iteration der Schleife zu entfernen:
while (formArray.length) { formArray.removeAt(0); }
Sie müssen dies nicht mehr tun. Jetzt reicht es aus, eine einzelne Methode aufzurufen:
formArray.clear()
▍Einstellen des Zeitpunkts des Empfangs einer Antwort bei Verwendung der ViewChild- und ContentChild-Anweisungen
Diese neue Funktion impliziert die Verwendung des
static Flags, mit dem Sie angeben können, wann die Anforderung aufgelöst wird, definiert durch die
ViewChild oder
ContentChild Direktive.
Möglicherweise sind Sie auf die folgenden Beispiele für inkonsistentes Systemverhalten gestoßen. Manchmal sind Suchergebnisse in der
ngOnInit Lebenszyklusmethode verfügbar, und manchmal sind sie nicht vorhanden, bevor
ngAfterContentInit oder
ngAfterViewInit . So verwenden Sie das
static Flag:
Es ist zu beachten, dass diese Funktionen für die
ViewChildren und
ContentChildren Anweisungen nicht verfügbar sind. Die entsprechenden Suchanfragen für Elemente werden ausgeführt, nachdem die Änderungserkennung durchgeführt wurde.
Wenn Sie
static: true sollten
static: true vorsichtig sein, da Sie mit diesem Flag keine Ergebnisse aus dynamischen Vorlagen (d. H. * NgIf) abrufen können. Dem System wurde eine Schaltplanregel hinzugefügt, mit der Sie vorhandenen Code unter Verwendung der neuen Syntax übersetzen können. Diese Syntax wird mit Ivy verwendet.
→ Details zu dieser Funktion finden Sie
hier .
▍Unterstützungs-Typoskript 3.4.x
Angular verwendet jetzt TypeScript 3.4 (die siebte Version von Angular verwendet TypeScript 3.2.x). Es gibt nicht so viele wichtige Änderungen in der neuen Version von TS. Sie werden wahrscheinlich nicht zu unangenehmen Konsequenzen führen.
→ Details zu den Innovationen von TS 3.4 finden Sie
hier .
▍ Leistungsverbesserung
Unter den aktuellen Bedingungen erstellt
ServerRendererFactory2 für jede Anforderung eine neue Instanz von
DomElementSchemaRegistry , was in Bezug auf Ressourcen recht teuer ist. Jetzt wird die gemeinsame Nutzung der globalen Instanz von
DomElementSchemaRegistry organisiert.
▍ Bereitstellen von Angular-Anwendungen auf Firebase-Hosting
Wenn Sie Firebase-Hosting zum Bereitstellen von Angular-Anwendungen verwenden, wird Ihnen diese Innovation auf jeden Fall gefallen. Der Punkt ist, dass es jetzt in der Angular CLI einen speziellen Befehl gibt, um diese Operation auszuführen:
ng run [PROJECT_NAME]:deploy
→
Hier erfahren Sie mehr über diese Funktion.
Veraltete APIs
▍Verwenden Sie bei der Arbeit mit TesBed.get einen beliebigen Typ
Die
TesBed.get Methode hatte zwei Signaturen. Einer wird eingegeben, der zweite ist der empfangende und zurückgebende Typ. Jetzt ist die Methodensignatur, die die Verwendung des Typs
any vorsieht, veraltet. Sie können diese Methode nur mit Angabe eines bestimmten Typs verwenden. Dies wirkt sich beispielsweise auf Fälle aus, in denen mit Zeichenfolgentoken (die nicht unterstützt werden) und mit einigen anderen Token gearbeitet wird.
Zuvor verwendete solche Designs:
TestBed.configureTestingModule({ providers: [{ provide: "stringToken", useValue: new Service() }], }); let service = TestBed.get("stringToken");
Nun wird der folgende Ansatz angewendet:
const SERVICE_TOKEN = new InjectionToken<Service>("SERVICE_TOKEN"); TestBed.configureTestingModule({ providers: [{provide: SERVICE_TOKEN, useValue: new Service()}], }); let service = TestBed.get(SERVICE_TOKEN);
▍Entfernen des DOKUMENTS aus dem Winkel- / Plattformbrowser
DOCUMENT aus dem Paket
@angular/platform-browser . Wenn Sie
DOCUMENT aus diesem Paket verwenden, sollten Sie es aus
@angular/common importieren.
▍Deinstallieren Sie das Angular / http-Paket
Das
@angular/http Paket war in Angular 5 veraltet, aber weiterhin verfügbar, da
@angular/platform-server abhängig war. Jetzt wird dieses Paket aus der Liste der Pakete entfernt.
Kritische Veränderungen
▍Auto Code Fix
Nur wenige wissen, dass Angular Fehler bei der Verwendung der HTML-Elemente
tr und
col automatisch korrigiert.
Im Fall von
tr Korrekturen vorgenommen, wenn sich das entsprechende Element nicht innerhalb des
tbody ,
tfoot oder
thead . Korrekturen bestanden in der automatischen Platzierung eines Elements in
tbody .
Im Fall von
col Korrekturen an Code vorgenommen, in dem sich dieses Element nicht innerhalb des
colgroup Tags befindet.
Angular überlässt die Korrektur dieser Fehler nun dem Ermessen der Entwickler. Dies geschieht, um Konflikte und Fehler zu vermeiden. Daher müssen sich diejenigen, die an diese Funktion gewöhnt sind, selbst um die Richtigkeit des Codes kümmern.
→ Details dazu finden Sie
hier .
▍ Winkelmaterial umbenennen
Das Angular Material-Projekt wurde in Angular Components umbenannt. Paketnamen haben sich nicht geändert.
Zusammenfassung
Angular 8 wird sehr bald veröffentlicht. Das Angular-Entwicklungsteam leistet hervorragende Arbeit. Die Ergebnisse ihrer Bemühungen erleichtern die Arbeit und das Leben derjenigen, die Angular verwenden. Insbesondere wird es beispielsweise mit jeder neuen Version des Frameworks immer einfacher, von der vorherigen Version zu diesem zu wechseln. So sieht es zum Beispiel bei Air France aus.
Zeitaufwand für das Upgrade auf neue Versionen von Angular ( Quelle )Infolgedessen können wir hoffen, dass der Übergang von Angular 7 zu Angular 8 nicht viel Zeit in Anspruch nimmt und keine ernsthaften Anstrengungen erfordert.
Hier finden Sie schrittweise Anleitungen zum Upgrade auf neue Versionen von Angular.
Vor ungefähr einem Monat
sagte Igor Minar
, dass alles darauf hindeutet, dass Angular 8.0.0 möglicherweise Ende Mai herauskommt.
Angular 8.0.0-rc.5 wurde am
24. Mai veröffentlicht.
Die Zukunft von Angular sieht recht optimistisch aus. Alles andere liegt bei uns.
Liebe Leser! Was erwarten Sie von Angular 8?
