Angular. Ferdinand Malcher
CLI.
tsconfig.json
IDE-Unterstützung
Diese Datei bildet den mit TypeScript 3.9 eingeführten Solution Style ab.4 Dieses Format sorgt dafür, dass IDEs und Build-Tools die Typ- und Package-Konfigurationen besser lokalisieren und auflösen können. In der Datei tsconfig.json werden daher nur weitere TypeScript-Konfigurationen referenziert.
Nutzen Sie Angular 9.x oder früher, so enthält die Datei den Inhalt der im Folgenden erläuterten Datei tsconfig.base.json, die erst mit Angular 10.0 eingeführt wurde.
Zu den TypeScript-Konfigurationsdateien gibt es fortlaufende Vorschläge und Diskussionen. Bitte beachten Sie, dass sich der Inhalt und die Dateinamen mit späteren Versionen von Angular noch ändern können. In diesem Fall wird es wie üblich eine automatische Migration geben.
tsconfig.base.json
Basiskonfiguration für den TypeScript-Compiler
Diese Basiskonfigurationsdatei existiert zur Vermeidung von doppelten und gleichen Einstellungen in den Dateien tsconfig.*.json. In dieser Datei sind Optionen angegeben, die vom TypeScript-Compiler gelesen und verarbeitet werden. Hier werden z. B. Angaben zum vorliegenden Modulformat sowie zum Zielformat gemacht, das nach dem Kompilierungsvorgang ausgegeben werden soll. Eine detaillierte Auflistung der Compiler-Optionen ist auf der TypeScript-Website zu finden.5 Normalerweise müssen wir an der Konfiguration allerdings nichts verändern.
tsconfig.app.json und tsconfig.spec.json
Spezifische TypeScript-Konfiguration
Diese beiden Dateien erweitern die angelegte Datei tsconfig.base.json. Die Datei tsconfig.app.json konfiguriert den Kompiliervorgang der Hauptanwendung. In der Datei tsconfig.spec.json wird spezifiziert, wie die Unit-Tests kompiliert werden sollen (siehe Kapitel zum Testing ab Seite 483). Analog dazu wird die Datei e2e/tsconfig.json beim Kompilieren der Oberflächentests ausgewertet (siehe Seite 526). In all diesen Dateien werden z. B. Angaben zum vorliegenden Modulformat sowie zum Zielformat gemacht, das nach dem Kompilierungsvorgang ausgegeben werden soll.
tslint.json
TSLint prüft den Code nach festgelegten Regeln.
Die Datei tslint.json beinhaltet eine Konfiguration für das Tool TS-Lint.6 Mit diesem Tool und der zugehörigen Konfigurationsdatei können wir dafür sorgen, dass in unserem Projekt stets ein einheitlicher Codestil eingehalten wird. Das Tool prüft den Code anhand der Konfiguration und warnt uns, sobald wir gegen eine festgelegte Regel verstoßen. Die in dieser Datei angegebenen Konventionen entsprechen gleichzeitig den festgelegten Regeln des Angular-Styleguides und sollten nicht verändert werden.7
TSLint ausführen
Um den von uns geschriebenen Quelltext gegenüber dem Styleguide und damit auch gegenüber den festgelegten Regeln der tslint.json zu prüfen, rufen wir den folgenden Befehl auf:
$ ng lint
Die Angular CLI ruft damit für uns tslint auf und prüft unseren Code gegen die Regeln. Sehen wir uns den Inhalt der Datei tslint.json an, entdecken wir die folgenden Regeln:
"directive-selector": [
true,
"attribute",
"bm",
"camelCase"
],
"component-selector": [
true,
"element",
"bm",
"kebab-case"
]
Namenskonventionen
Damit wird TSLint mitgeteilt, wie Komponenten und Direktiven benannt werden sollen: Hier findet sich die Konvention für die Schreibweise (camelCase, kebab-case), und das von uns zuvor definierte Präfix bm taucht wieder auf. TSLint prüft beim Aufruf, ob das Präfix bm für Komponenten und Direktiven gesetzt wurde, und gibt uns einen entsprechenden Fehler aus, sofern wir uns nicht an die Regel gehalten haben.
Einstellungen anpassen
Sie können die Einstellungen in der Datei tslint.json auch anpassen, wenn Sie abweichende Coderichtlinien in Ihrem Projekt verwenden. So ist es zum Beispiel möglich, die Standardeinstellung von Single Quotes auf Double Quotes umzustellen. Sie sollten allerdings die originalen Einstellungen beibehalten, weil sie bereits dem Styleguide von Angular entsprechen.
Tipp: TSLint für Visual Studio Code
TSLint ist auch als Erweiterung für Visual Studio Code verfügbar. Das Plug-in lässt sich über den Extensions Browser finden und installieren. Nach der Installation werden direkt im Codeeditor Hinweise zur Konformität des Quellcodes angezeigt.
TSLint wird abgelöst.
Wir möchten an dieser Stelle bereits anmerken, dass TSLint künftig zugunsten von ESLint abgelöst wird.8 Wir halten Sie zu diesem Thema im Blog auf der Website zum Buch auf dem Laufenden.9
.browserslistrc
Über diese Datei werden von der Anwendung unterstützte Browser und deren Versionen festgelegt. Die Voreinstellungen sind hier so gesetzt, dass standardmäßig die neueste oder die letzten beiden Versionen der wichtigsten Browser unterstützt werden. Wenn Sie das Tool browsers-list im Projekt ausführen, erhalten Sie eine detaillierte Auflistung der unterstützten Browser, die in der aktuellen Konfiguration der Datei .browserslistrc inbegriffen sind:
$ npx browserslist
JavaScript-Version abhängig von den Browserversionen
Sie können die Werte hier selbstverständlich anpassen. Möchten Sie beispielsweise den Internet Explorer 11 unterstützen, fügen Sie den Eintrag IE 11 zur Datei hinzu. Angular berücksichtigt die Einstellungen beim Build und erstellt beispielsweise Bundles mit ES5-Unterstützung, sofern sich ein Browser unter den Zielen befindet, der einen neueren JavaScript-Standard nicht unterstützt.
CSS-Autoprefixer
Weiterhin nutzt Angular beim Build der Anwendung den CSS-Autoprefixer, um unterschiedliche CSS-Regeln für verschiedene Browser und deren Versionen anzugleichen. Auch hierbei wird die Konfiguration in der Datei .browserslistrc berücksichtigt.
Der Inhalt des src-Ordners
Die Angular CLI hat uns unser Projekt mit einer ersten Komponente angelegt. Das Verzeichnis src sollte jetzt die folgende Struktur haben:
Bevor wir loslegen, wollen wir noch einige der angelegten Dateien im Verzeichnis
Die Einstiegsseite index.html
Die Datei index.html ist die Einstiegsseite beim Aufruf der Anwendung im Browser. Das ist also der Teil unserer Anwendung, der vom Nutzer direkt angefordert wird. Die Angabe <base href="/"> wird von Angular benötigt, um die URL korrekt aufzulösen. Im <body>-Teil des Templates finden wir das Element <bm-root>. An dieses Element bindet Angular die BookMonkey-Applikation,