Ein Angular CLI Projekt unter Visual Studio 2017 erstellen

In diesem Artikel werden wir dir zeigen, wie du ein neues Frontend-Projekt in Angular erstellst und dieses dann auch in Visual Studio entwickeln kannst.

Angular-Projekt anlegen

Zunächst haben wir dir eine etwas detailliertere Anleitung zusammengestellt, wie du ein Angular-Projekt anlegst.

Zu Beginn lädt du „node.js“ herunter (https://nodejs.org/de/) und installiert dieses. Als nächstes öffnet du die „cmd.exe“ (Windowstaste drücken und „cmd“ eingeben) und installierst „npm“, indem du in die Konsole „npm install npm -g“ tippst und mit der Enter-Taste bestätigst.

Danach installiert du „Angular CLI“, indem du in die Konsole folgenden Befehl schreibst: „npm install -g @angular/cli“. Nun ist alles soweit, dass du ein neues Angular-Projekt erstellen kannst. Im nächsten Schritt erstellen wir das Angular-Projekt durch das Eintragen des Befehls „ng new <ProjektName>“ in die Konsole.

Das Projekt wird dabei unter dem aktuellen Pfad angelegt. Nun navigierst du, mit Hilfe der Konsole und der Befehlszeile „cd <ProjektName>“, zu dem ebend angelegten Projekt. Damit der Projektfortschritt auch ersichtlich wird, bringst du das Projekt auf den Local Host, welcher nur auf deinem Computer aus erreichbar ist. Dafür benutzt du den Befehl „ng serve“ in der Konsole.

Das Projekt ist nun lokal erreichbar, indem du, im Browser deines Vertrauens, „http://localhost:4200“ in die URL Zeile einträgst. Jetzt ist alles dafür bereit, dass du die Projektdateien unter dem Pfad „C:\Users\<Benutzer>\<ProjektName>\src\app“ (sofern kein anderer gewählt wurde) bearbeitest.

Das Projekt direkt in Visual Studio entwickeln

Um das Projekt in Visual Studio entwickeln zu können, benötigst du mindestens Visual Studio 2015 Update 3. Falls du kein Visual Studio installiert haben solltest oder eine ältere Version besitzt kannst du dir hier kostenlos Visual Studio herunterladen.

Wichtig: Die Konsole und der Browsertab sind zu schließen, um den Lokal Host wieder freizugeben.

Hierfür haben wir dir ebenfalls eine Anleitung zusammengetragen:

  • Das Addon NPMTaskRunner installieren
  • node.js-Pfad in den Optionen (Extras) auf die aktuellste Version anpassen und nach oben schieben
  • Neues leeres Webprojekt in Visual Studio anlegen
  • Aus dem Ordner des Angular-Projekts alle Datein zum Projektmappenordner hinzufügen
  • Nach dem Einfügen, den „scr“-Ordner und die „.json“-Dateien „Zu Projekt hinzufügen“
  • Über den Taskausführungsexplorer kann man dann den Build, bzw. den Start mit Doppelklick ausführen

Wenn einmal „Start“ aufgerufen wurde, musst du dir keine Sorgen mehr um das Kompilieren des Frontends machen. Solltest du eine TypeScript-Datei speichern, dann wird das Projekt von alleine gebaut und die Seite lädt sich automatisch neu.

Wir wünschen dir viel Spaß beim Programmieren.

Kommentar schreiben

  • (benötigt)
  • (benötigt)