25 Jan 2018 - Matthias Voigt
Entwickelt man eine Anwendung mit Angular CLI, hat man das komfortable Feature, recht einfach neue Komponenten hinzufügen zu können.
Hierzu wird einfach ein Befehl aufgerufen:
ng generate component newComponent
ng g c newComponent
Die zweite Zeile zeigt einfach nur die Kurzform. Hierbei wird in der Angular-App ein neuer Ordner mit dem Namen der Komponente sowie den nötigen Dateien erstellt und eine Verknüpfung in der app.module.ts angelegt, damit die Komponente sofort verfügbar ist. Dieses komfortable Feature fehlt leider in Visual Studio. Will man ein neues Element hinzufügen, müsste man jede Datei einzeln erstellen und die Komponente von Hand verknüpfen. Neben der Fehleranfälligkeit sollte dies für eine IDE eigentlich selbstverständlich sein. Aber schauen wir mal, wie man das Problem lösen könnte.
Aber kurz vorweg: Am Ende gehe ich doch einen etwas anderen Weg. Möchte man nun wenigstens über die Package Manager Console die Komponente hinzufügen (hier beachten, dass man sich im Projektverzeichnis befindet), bekommt man eine Fehlermeldung:
ng : Unable to find "@angular/cli" in devDependencies.
Weiterhin wird gebeten, @angular/cli zu installieren, was wir im ersten Schritt auch tun:
npm install --save-dev @angular/cli@latest
Da es immer noch einen Fehler gibt, installieren wir nun chalk und rxjs:
npm install --save-dev chalk@latest
npm install --save-dev rxjs@latest
Leider wird es nun immer noch einen Fehler geben (aber wir nähern uns dem Ende). Und zwar gibt es wohl angeblich mehrere passende Module. Das lag in meinem Fall daran, dass Angular CLI nach *.module.ts-Dateien sucht. Dies kann man leicht fixen, indem man app.browser.module.ts zu app.module.browser.ts umbenennt.
Leider führt das auch dazu, dass man in den Dateien boot.browser.ts und boot.server.ts die Änderung einpflegen muss. Nun funktioniert aber der oben genannte Befehl problemlos. Lediglich der Internet Explorer hatte noch ein Problem - nach einem Neustart von Visual Studio hat sich das aber erledigt. Nun ist das Projekt soweit modifiziert, dass man die Angular CLI Befehle nutzen kann und somit einen leichteren Workflow hat.
Leider ist das Setup relativ umständlich und man hat keine Gewissheit, dass Microsoft keine “breaking changes” einbaut. Daher habe ich mich für einen anderen, eher einfachen Weg entschieden. Man muss dann zwar auf die Vorteile von CLI verzichten, aber kann sofort loslegen. Natürlich geht dieser Weg über eine Extension. Mithilfe der normalen Funktion zum Hinzufügen eines Elementes werden hier die entsprechenden Dateien mit passendem Inhalt angelegt. Einzig die Verknüpfung in der app.module wird nicht angelegt, aber ich denke, das ist zu verkraften.
Mit dem Erscheinen von ASP.NET Core 2.1 im Laufe des Jahres wird das Angular Template auch CLI-konform sein. Somit ist dieser Artikel dann (hoffentlich) überflüssig.