Angular 9 ist jetzt verfügbar - Ivy ist angekommen

So aktualisieren Sie auf Version 9

Efeu

• Kleinere Bündelgrößen
• Schnelleres Testen
• Bestes Debugging
• Verbesserte CSS-Klassen- und Stilbindungen
• Verbesserte Typprüfung
• Verbesserte Build-Fehlermeldungen
• Verbesserte Erstellungszeit, AOT standardmäßig aktiviert
• Verbesserung der Internationalisierung

Kleinere Bündelgrößen

• Kleine Anwendungen, die viele der Funktionen des Frameworks nicht nutzen, können am meisten vom Treeshaking profitieren.
• Große Anwendungen mit vielen Komponenten können von reduzierten Werksgrößen profitieren.
• Mittelgroße Anwendungen werden ungefähr gleich oder etwas kleiner, da sie weniger vom Baumbau profitieren und nicht viele Komponenten verwenden, um von kleineren Fabriken stark zu profitieren.

Schnelleres Testen

Verbessertes Debugging

• Angular , .
• , applyChanges

Verbesserte Styling- und CSS-Klassen.

<my-component style="color:red;" [style.color]="myColor" [style]="{color: myOtherColor}" myDirective></div>

@Component({
  host: {
    style: "color:blue"
  },...
})
...

@Directive({
  host: {
    style: "color:black",
    "[style.color]": "property"
  },...
})
...

<div [style. -- main-border-color]=" '#CCC' ">
<p style="border: 1px solid var( - -main-border-color)">hi</p>
</div>

Typprüfung verbessert

• fullTemplateTypeCheck - Wenn Sie dieses Flag aktivieren, wird der Compiler angewiesen, alles in Ihrer Vorlage zu überprüfen (ngIf, ngFor, tp-template usw.).
• strictTemplates - Wenn Sie dieses Flag aktivieren, werden die strengsten Regeln für die Typprüfung angewendet.

Buildfehler behoben

Verbesserte Erstellungszeit, AOT-Compiler ist standardmäßig aktiviert.

Verstärkte Internationalisierung (i18n)

Zuverlässigeres ng Update

• Verwenden Sie immer die neueste Version der CLI. Ab 8.3.19 CLI verwenden wir jetzt die CLI aus der Zielversion des Updates. In Zukunft werden Updates immer von der letzten CLI verarbeitet.
• Besserer Update-Fortschritt. Das ng-Update bietet jetzt weitere Informationen darüber, was unter der Haube passiert. Für jede Migration werden Informationen dazu angezeigt.
• Einfacheres Debuggen von Updates. Standardmäßig startet ng update alle Migrationen und überlässt die kumulierten Änderungen der Festplatte zur Überprüfung. Das Upgrade auf Version 9 führt auch ein neues Flag ein --create-commits. Wenn Sie ng update --create-commits ausführen, erfasst das Tool nach jeder Migration den Status Ihrer Codebasis, sodass Sie Schritt für Schritt Änderungen vornehmen und debuggen können, die in Ihrem Code veröffentlicht werden.

Neue Funktionen "zur Verfügung gestellt"

• Plattform - bereitgestelltIn: Die Anzeige 'Plattform' stellt den Dienst in einem speziellen Singleton-Plattforminjektor zur Verfügung, der von allen Anwendungen auf der Seite gemeinsam genutzt wird.
• any - bietet eine eindeutige Instanz für jedes Modul (einschließlich Lazy-Modulen).

Komponentenbindung

it("should switch to bug report template", async () => {
  expect(fixture.debugElement.query("bug-report-form")).toBeNull();
  const selectTrigger = fixture.debugElement.query(
    By.css(".mat-select-trigger")
  );
  selectTrigger.triggerEventHandler("click", {});
  fixture.detectChanges();
  await fixture.whenStable();
  const options = document.querySelectorAll(".mat-select-panel mat-option");
  options[1].click(); // Click the second option, "Bug".
  fixture.detectChanges();
  await fixture.whenStable();
  expect(fixture.debugElement.query("bug-report-form")).not.toBeNull();
});

it("should switch to bug report template", async () => {
  expect(fixture.debugElement.query("bug-report-form")).toBeNull();
  const select = await loader.getHarness(MatSelect);
  await select.clickOptions({ text: "Bug" });
  expect(fixture.debugElement.query("bug-report-form")).not.toBeNull();
});

Neue Komponenten

• Sie können den YouTube-Player mit dem neuen YouTube-Player in Ihre Anwendung einbetten.
• Wir führen auch Google-Maps-Komponenten ein. Mit diesen Komponenten können Sie Google Maps einfach visualisieren, Markierungen anzeigen und Interaktivität verbinden, sodass es wie eine normale Winkelkomponente funktioniert, sodass Sie die Google Maps-API nicht mehr erlernen müssen.

Verbesserung des IDE- und Sprachdienstes

• Mit der TextMate-Grammatik für die Vorlagensyntax können Sie jetzt die Syntax sowohl in eingebetteten als auch in externen Vorlagen hervorheben
• Gehen Sie zu Definition für templateUrl und styleUrls
• Geben Sie Informationen und NgModule-Informationen in den Tooltip ein

TypeScript 3.7-Unterstützung