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
<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.
package-lock.json
Festsetzen von Abhängigkeiten
Die Datei package-lock.json wird automatisch vom Node Package Manager erzeugt und beinhaltet die aktuelle Konfiguration des Nutzers. Hier wird zum Beispiel festgehalten, welche NPM-Pakete mit welcher exakten Version installiert wurden. Die Datei wird bei jeder Änderung des Verzeichnisses
package.json
Konfiguration für NPM NPM-Skripte
In der Datei package.json befindet sich die Konfiguration für den Node Package Manager (NPM). Sie enthält Angaben zum Projektnamen, zur Version, zur Lizenz, unter der das Projekt stehen soll, sowie Angaben zu abhängigen Paketen. Die Angaben in scripts sorgen für die Ausführung bestimmter Befehle zum Starten der Anwendung oder zugehöriger Tests. Einen Anwendungsfall dafür sehen wir später im Kapitel zur Internationalisierung ab Seite 474.
Abhängigkeiten
Weiterhin gibt es die zwei wesentlichen Abschnitte dependencies und devDependencies. In dependencies werden alle abhängigen Module mit den entsprechend installierten Versionen gelistet, die mittels NPM installiert wurden und direkt von der Anwendung verwendet werden. In devDependencies hingegen erscheinen die Pakete, die für die Entwicklung des Projekts benötigt werden. Dies sind zum Beispiel Test-Runner und deren Erweiterungen, Transpiler und natürlich auch die Angular CLI.
