Erste Schritte: Angular-Anwendung optimieren

Möchten Sie Ihre Angular-Website so schnell und barrierefrei wie möglich gestalten? Dann bist du hier genau richtig.

Angular ist ein Framework zum Erstellen von Benutzeroberflächen. Es bietet Bausteine, mit denen Sie schnell eine wartbare, skalierbare Anwendung einrichten können. Mit Angular können Entwickler Anwendungen für das Web, Mobilgeräte oder den Computer erstellen.

Diese Sammlung konzentriert sich auf fünf Hauptbereiche zur Optimierung einer Angular-Anwendung:

  • Leistung Ihrer App verbessern, um mehr Nutzer-Conversions und -Interaktionen zu erzielen
  • Zuverlässigkeit Ihrer Anwendung in schlechten Netzwerken verbessern, indem Sie Assets mit dem Angular-Service-Worker vorab im Cache speichern
  • Ihre Anwendung mithilfe von Pre-Rendering und serverseitigem Rendering für Suchmaschinen und Social-Media-Bots sichtbar machen
  • Ihre Anwendung installierbar machen, um eine Nutzererfahrung zu bieten, die der einer iOS-/Android-App ähnelt

In jedem Beitrag der Sammlung werden Techniken beschrieben, die Sie direkt auf Ihre eigenen Anwendungen anwenden können.

Was ist nicht in dieser Sammlung enthalten?

In dieser Sammlung wird davon ausgegangen, dass Sie mit Angular und TypeScript vertraut sind. Wenn Sie sich noch nicht sicher sind, lesen Sie die TypeScript-Dokumentation und den Einstiegsleitfaden für Angular auf angular.io.

Projekt starten

Mit der Angular-Befehlszeile (CLI) können Sie schnell eine einfache clientseitige Angular-Anwendung einrichten. Dieser Beitrag enthält eine kurze Einführung in die Befehlszeile. In anderen Beiträgen der Sammlung erfahren Sie, wie Sie erweiterte Funktionen wie serverseitiges Rendering und Bereitstellungsunterstützung hinzufügen.

Befehlszeile einrichten

Installieren Sie zuerst die Befehlszeile global und prüfen Sie, ob Sie die neueste Version haben. Führen Sie dazu die folgenden Befehle aus:

npm i -g @angular/cli
ng
--version

Der letzte Befehl muss Version 8.0.3 oder höher ausgeben.

Wenn Sie die Befehlszeile nicht global installieren möchten, können Sie sie auch lokal installieren und mit dem Befehl npx ausführen:

npm i @angular/cli
npx ng
--version

Projekt erstellen

So erstellen Sie ein neues Projekt:

ng new my-app

Mit diesem Befehl werden die ersten Dateien und die Ordnerstruktur für Ihre Anwendung erstellt und die erforderlichen Node-Module installiert.

Sobald die Einrichtung abgeschlossen ist, starten Sie die Anwendung mit folgendem Befehl:

cd my-app
ng serve

Sie sollten jetzt unter http://localhost:4200 auf Ihre Anwendung zugreifen können.

Nächste Schritte

Im Rest dieser Sammlung erfahren Sie, wie Sie die Leistung und die SEO Ihrer Angular-Anwendung verbessern. Folgendes ist abgedeckt:

  • Codeaufteilung auf Routingebene in Angular
  • Leistungsbudgets mit der Angular-Befehlszeile
  • Strategien für das Vorabladen von Routen in Angular
  • Optimierung der Änderungserkennung in Angular
  • Große Listen mit dem Angular CDK virtualisieren
  • Assets mit dem Angular-Service-Worker vorab im Cache speichern
  • Routen mit der Angular-Befehlszeile vorab rendern
  • Serverseitiges Rendering mit Angular Universal
  • Web-App-Manifest mit der Angular-Befehlszeile hinzufügen