Читать книгу Angular - Ferdinand Malcher - Страница 109

Die zentrale Angular-Konfigurationsdatei Hilfe durch Editor-Extensions

Die Datei angular.json beinhaltet die zentrale Angular-Konfiguration und verweist auf weitere zugehörige Konfigurationsdateien. Im ersten Teil finden wir einen Verweis auf eine Schema-Definition für die vorliegende Konfigurationsdatei. Das Schema definiert den Aufbau sowie gültige Werte der Konfigurationsdatei. Öffnen wir die an dieser Stelle hinterlegte Datei, so sehen wir Beschreibungen für alle einzelnen Parameter sowie die Datentypen, die von den Parametern verlangt werden. Sofern der Editor Visual Studio Code mit den empfohlenen Erweiterungen verwendet wird, zeigt uns der Editor automatisch diese Infos als Hilfe an, sobald wir mit der Maus über einen der Parameter fahren. Für andere Quellcode-Editoren stehen ähnliche Hilfen bereit.

Das Teilobjekt projects beinhaltet eine Liste von Projekten, die durch die Konfigurationsdatei verwaltet werden. Hier finden wir das von uns zuvor angelegte Projekt book-monkey mit der zugehörigen Konfiguration wieder. Tabelle 5–1 zeigt die wichtigsten Parameter und deren Angaben im Überblick.

An dieser Stelle sehen wir, dass die Angular CLI beim Anlegen des Projekts das von uns festgelegte Präfix bm berücksichtigt und in der Konfiguration mit aufgenommen hat.

Referenzen auf Projektdateien Einstellungen anpassen

Unter architect → build → options finden wir Angaben zu wichtigen Projektdateien. Zum Beispiel werden hier die Einstiegsdateien für die Anwendung angegeben (index und main), zusätzliche Stylesheets registriert (styles) und weitere Skripte eingebunden (scripts). Sie können die Einstellungen in dieser Datei selbstverständlich auch an Ihre Bedürfnisse anpassen. Wir empfehlen jedoch, zunächst die originalen Einstellungen beizubehalten. Im Kapitel zum Build und Deployment ab Seite 539 gehen wir näher auf den Aufbau der Datei angular.json und die Build-Konfiguration ein.

Parameter	Funktion
projectType	Angabe der Projektart, z. B. application oder library
root	Verweis auf das Hauptverzeichnis des Projektes und zugehöriger Dateien. Alle folgenden Angaben beziehen sich auf diesen Pfad.
sourceRoot	Verweis auf das Verzeichnis des Quellcodes für unsere Anwendung
prefix	Angabe des Selektor-Präfixes für Komponenten
schematics	Einstellungen für zusätzliche Skripte (Schematics)
outputPath	Das Ausgabeverzeichnis beim Erzeugen des Builds
index	Pfad zur HTML-Datei, mit der die Anwendung gestartet wird
main	Pfad zur initialen TypeScript-Datei, die den Bootstrapping-Prozess startet
polyfills	Pfad zur Datei mit importierten Polyfills
tsConfig	Pfad zur TypeScript-Konfigurationsdatei für die App
assets	Angabe von Verzeichnissen und Pfaden mit statischen Inhalten
styles	Pfadangaben zu Stylesheets, die in der gesamten Anwendung verwendet werden sollen
scripts	Pfadangaben zu weiteren Bibliotheken, die in der gesamten Anwendung verwendet werden sollen
configurations	Angaben zu verschiedenen Projektkonfigurationen
test	Angaben zu Testspezifikationen und Parametern

Tab. 5–1 Konfigurationsparameter für eine Anwendung in der Datei angular.json

Statische Assets einbinden

Besonderes Augenmerk wollen wir auf den Ordner src/assets legen, der in der angular.json unter assets eingetragen ist. Hier können wir Dateien ablegen, die beim Build statisch ausgeliefert werden: Bilder, Icons, Fonts und mehr. Dateien aus diesem Ordner können Sie in der Anwendung schließlich mit dem relativen Pfad assets/ ausgehend vom Wurzelpfad referenzieren. Legen wir also beispielsweise eine Bilddatei icon.png unter src/assets ab, so können wir die Datei später wie folgt im Template einbinden:

<img src="assets/icon.png" alt="Icon">

Selbstverständlich können wir den Eintrag assets in der angular.json ergänzen und dort weitere Dateien und Ordner angeben. Nur die dort konfigurierten Pfade werden beim Build als statische Assets übernommen und können im Template referenziert werden.