Читать книгу Angular - Manfred Steyer - Страница 12

Um Ihre Anwendung zu starten, wechseln Sie in den generierten Projektordner. Dort bauen Sie mit ng serve die Anwendung und stellen sie über einen Demowebserver bereit:

cd flight-app

ng serve -o

Der Schalter -o öffnet einen Browser, der die Anwendung anzeigt. Standardmäßig findet sich diese Anwendung unter http://localhost:4200. Ist Port 4200 schon belegt, erkundigt sich ng serve nach einer Alternative. Außerdem nimmt der Schalter --port den gewünschten Port gleich beim Start von ng serve entgegen:

ng serve -o --port 4242

Die im Browser angezeigte Anwendung sieht wie in Abbildung 1-3 aus. Auch hier kann es von Version zu Version zu Abweichungen kommen.

Abbildung 1-3: Generierte Angular-Anwendung

Der für die Entwicklung gedachte Befehl ng serve macht aber noch ein wenig mehr: Er überwacht sämtliche Quellcodedateien und stößt das Kompilieren sowie Generieren der Bundles erneut an, wenn sie sich ändern. Danach aktualisiert er auch das Browserfenster.

Um das auszuprobieren, können Sie mit Visual Studio Code die Datei src\app\app.component.html öffnen und das erste Vorkommen von Welcome durch Hello World! ändern. Nach dem Speichern der Datei sollte ng serve den betroffenen Teil der Anwendung neu kompilieren, bundeln und den Browser aktualisieren (siehe Abbildung 1-4).

Abbildung 1-4: Generierte Angular-Anwendung ändern

Wenn Sie Visual Studio Code verwenden, sollten Sie zunächst den Hauptordner Ihrer Angular-Anwendung mit dem Befehl File/Open Folder öffnen. Der Hauptordner ist der, der auch die Datei package. json beinhaltet. Das stellt sicher, dass Visual Studio Code sämtliche Konfigurationsdateien findet und keine unnötigen Fehler anzeigt. Danach können Sie die gewünschte Datei über den links angezeigten Explorer suchen und öffnen. Alternativ dazu bietet sich die Tastenkombination Strg+P an. Sie öffnet ein kleines Fenster, mit dem man nach der gewünschten Datei suchen kann. Mit Strg+Umschalt+C können Sie übrigens jederzeit eine externe Konsole im aktuellen Ordner öffnen, um z.B. die Angular CLI auszuführen. Die Tastenkombination Strg+Umschalt+Ö öffnet hingegen die Konsole als Terminal direkt in Visual Studio Code.

Die automatische Generierung der Bundles nach einer Änderung am Programmcode funktioniert meist ganz gut, aber ab und an kommt die CLI aus dem Tritt. Das ist unter anderem dann der Fall, wenn Sie mehrere Dateien rasch hintereinander speichern. Auch das Umbenennen von Dateien bringt diesen Mechanismus aus dem Konzept. Abhilfe schafft hier ein erneutes Speichern der betroffenen Dateien oder – wenn alle Stricke reißen – ein Neustart von ng serve.