9 Tipps & Tricks für Angular

Angular ist unter Webentwicklern ein beliebtes Framework für das Programmieren von Web-, Desktop- und mobilen Anwendungen. Die auf TypeScript basierende OpenSource Plattform bietet eine Vielzahl von Tools, welche die Umsetzung von Web-Projekten einfach und zeitsparend gestaltet.

Bevor es losgeht, installiert ihr zunächst über Angular CLI ein Angular 8 Projekt mit den entsprechenden Standardkonfigurationen. Angular CLI stellt uns für die Webentwicklung einen Webpack-Server zur Verfügung – das Ergebnis lässt sich schließlich auf verschiedene Server deployen.

Vorab der Hinweis: Hier beschäftigen wir uns mit der Plattform Angular,
nicht dem Vorgänger-Framework Angular JS!

In der Standardkonfiguration von Angular findet ihr das Linting-Tool tslint.json zur Validierung des TypeScript-Codes – dabei fehlt allerdings ein entsprechendes Pendant für SASS oder CSS.  Um auch SASS- und CSS-Code linten und validieren zu können, installiert ihr euch alle erforderlichen npm-Module des Linters stylelint: npm i -D stylelint stylelint-config-recommended-scss stylelint-scss stylelint-prettier

Im nächsten Schritt erstellt ihr in eurem Projekt eine .stylelintrc-Datei. Mit dem Befehl stylelint-config-recommended-scss übernehmt ihr die Standardkonfigurationen von SASS. stylelint-scss bezweckt, dass nicht nur CSS-, sondern auch SASS-Code validiert werden kann, stylelint-prettier dient der Formatierung – dazu mehr im nächsten Tipp. 

Nun müsst ihr Prettier noch in tslint.json als euer standardmäßiges Formatierungstool festlegen. Der entsprechende npm Install-Befehl lautet: npm i -D tslint-config-prettier Das Gleiche wiederholt ihr in .stylelintrc: npm i -D stylint-prettier Die vorherigen Formatierungseinstellungen sind nun überschrieben und Prettier als Tool der Wahl vermerkt. 

In eurem Angular-Projekt habt ihr die Möglichkeit, die standardmäßige TypeScript-Konfiguration mit strict zu erweitern und euren Quelltext so strenger zu validieren.

noImplicitAny bewirkt, dass verwendete Properties und Parameter explizit mit einem Datentyp versehen werden müssen. strictNullChecks macht eine Prüfung gegen Null erforderlich. Zuletzt sorgt incremental dafür, dass das TypeScript-Projekt inkrementell gebaut wird. 

Bei den unter strict aufgeführten Punkten handelt es sich um eine ausführlichere Beschreibung des Short Codes. Für bestehende Projekte ist es empfehlenswert, jedes Property einzeln zu aktivieren – so kann die Menge an Kompilierungsfehlern reduziert werden. 

Angular bietet die Option, einen Proxy zu konfigurieren, der es euch sehr viel einfacher macht, Anfragen gegen euer Backend zu stellen. In unserem Beispiel haben wir in unserer app.component.ts einen http.get-Request ausgeführt, der gegen /api/status geht:

Um dem Server einen Proxy zuzuordnen, erstellen wir die Datei proxy.conf.json. Alle Anfragen, die gegen /api gehen, werden hierdurch zukünftig an unseren Expressserver auf dem Port 3000 weitergeleitet:

Schließlich müssen wir nur noch in angular.json festhalten, wo sich die Proxy-Datei findet:

In Projekten ist es häufig notwendig, zentrale Farben zu bestimmen, um beispielweise das UI eines Kunden umzusetzen. In unserer color.scss haben wir die Farben Rot und Grün festgelegt:

Um diese in unserer app.component.scss zu verwenden, importieren wir sie mit @import:

Problem ist hier: Möchtet ihr die Farben an verschiedenen Stellen und in verschiedenen Komponenten verwenden, muss der Pfad immer wieder angepasst werden, je nachdem, auf welcher Ebene ihr euch befindet. Dieser Mehraufwand kann umgangen werden, indem ihr in eurer angular.json Alias-Pfade erstellt. Hier haben wir entsprechend eine stylePreprocessorOptions hinterlegt und unser Theme eingebunden:

Dadurch wird es möglich, die Farben einfach durch ./colors zu importieren, ganz unabhängig davon, in welcher Verzeichnistiefe ihr aktuell arbeitet.

Vielleicht kennt ihr das Problem: Seit der Einführung von Differential Loading in Angular 8 gibt der Internet Explorer 11 bei ng serve lediglich eine weiße Seite aus. Das lässt sich damit begründen, dass in der tsconfig.json das target auf die Version es2015 angepasst wurde, mit welcher der Internet Explorer schlicht nichts anfangen kann.

Dieses Problem könnt ihr folgendermaßen umgehen: Ihr erstellt eine tsconfig.es5.json und setzt euer target zurück auf es5. Durch den Befehl ./tsconfig.app.json wird von eurer TypeScript-Konfiguration geerbt.

Nun müsst ihr in package.json den Aufruf entsprechend ändern – hier empfehlen wir den Server, der mit es5 kompiliert, auf einem anderen Port laufen zu lassen.

Dieser Port benötigt entsprechend die Konfiguration es5, welche ihr folgendermaßen in angular.json definiert:

Nachdem ihr alle Schritte vorgenommen habt, sind für eure Website zwei verschiedene Server vermerkt: Einer für es2015 und einer für es5 – mit letzterer Version kann der Internet Explorer arbeiten und die Website wird im Browser korrekt angezeigt. 

Eine weitere Möglichkeit ist es über extensions.json die empfohlenen Visual Studio Code Plugins innerhalb des Teams zu teilen. Hier seht ihr eine Recommendations-Array mit den verschiedenen IDs für die Plugins.

Anstatt jede Zeile für die Installation zu kopieren, könnt ihr in die Extensions wechseln und euch dort alle empfohlenen Plugins für das Projekt anzeigen lassen. Dies funktioniert entweder über den Befehl @recommended oder über „Show Recommended Extensions“ in der Auswahlliste. 

Die Extensions lassen sich per Klick auf den entsprechenden Button installieren und innerhalb eures Teams teilen. 

Weiterhin wird erfragt, welches Projekt ihr im Rahmen von Firebase aktualisieren möchtet. Über den Befehl project$ ng deploy in der Kommandozeile deployt ihr eure gesamte Anwendung zu Firebase. Am Ende der Kommandozeile wird eine URL angezeigt, mit der ihr euch die gehostete Website anzuschauen könnt.

Firebase bietet darüber hinaus Authentifizierungs- und Datenbankmöglichkeiten sowie File-Storage für größere Dateien.   

Wir hoffen, dass euch der ein oder andere unserer Tipps weiterhelfen konnte! Für weiteres Know-how rund ums Thema Webentwicklung könnt ihr in unsere Full Stack Development-Reihe auf YouTube reinschauen.