Angular. Ferdinand Malcher

Angular

Sie also eine geringfügig andere Struktur vorfinden als die hier beschriebene, schauen Sie am besten in die Datei angular.json. Dort finden Sie die Pfade zu den entsprechenden Konfigurationsdateien.

angular.json

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:

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 node_modules und der Datei package.json durch NPM immer wieder aktualisiert. Sie sollte unbedingt bei einer Änderung mit committet werden, da sie dafür sorgt, dass beim Klonen oder Updaten des Projekts durch einen anderen Nutzer stets der gleiche Abhängigkeitsbaum der installierten Pakete aufgebaut wird.

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

Скачать книгу