Angular 2 mit TypeScript und Visual Studio Code nutzen [Update für Beta 0]

Update vom 24. 12. 2015 für Angular 2 Beta 0: Durch kleine Änderungen am Quick-Start-Sample vom Angular-Team kann dieses fast 1:1 zum Start mit Visual Studio Code verwendet werden.

Das neue Visual Studio Code, welches derzeit in der Version 0.x vorliegt, ist ein leichtgewichtiger und für Windows, Linux und Mac OS verfügbarer Code-Editor mit Unterstützung für TypeScript. Auch Angular 2 setzt auf TypeScript und somit bietet es sich an, erste Gehversuche mit Angular 2 unter Nutzung von Visual Studio Code zu unternehmen. Das dürfte auch einer der Gründe sein, warum selbst auf Google-Konferenzen Mitglieder aus dem Angular-Team immer auf Visual Studio Code zurückgreifen.

Um ein erstes Beispiel mit der vorliegenden Version 0.x zum Laufen zu bringen, sind ein paar Schritte notwendig, die ich nachfolgend in Form einer Schritt-für-Schritt-Anleitung festhalte. Dabei beziehe ich mich auf den 5 Min Quickstart von angular.io.

  1. Visual Studio Code installieren (wer hätte das gedacht): https://code.visualstudio.com/
  2. Sicherstellen, dass NodeJS installiert ist, da im nachfolgenden der Node-Package-Manager npm genutzt wird: http://node.org/
  3. Dateien entsprechend dem 5 Min Quickstart zu Angular 2 anlegen. Diese sind: tsconfig.json, package.json, index.html, app/app.component.ts, app/boot.ts. Details dazu findet man auf angular.io sowie im Github-Repository des Autors.
  4. Mit npm install auf der Kommandozeile die in der Datei package.json definierten Bibliotheken herunterladen.Auf die Kommandozeile gelangt man am Einfachsten mit der Tastenkombination Strg+Shift+C.
  5. Zum Anstoßen eines Build-Tasks Strg+Shift+B drücken
  6. Visual Studio Code legt nun eine Datei tasks.json an. Da das 5 Min Quickstart zu Angular 2 davon ausgeht, dass ein laufender Prozess die Typescript-Dateien überwacht und bei jeder Änderung diese automatisch kompiliert, ist eine Kompilierung in Visual Studio Code nicht notwendig. Die Prüfungen, welche vom Kompiler durchgeführt werden, sind jedoch sinnvoll. Deswegen bietet es sich an, das Argument --noemit über das Array args:
    "args": ["--noemit"], 
    "isShellCommand": true,
  7. Den Build-Tasks nochmals mit Strg+Shift+B anstoßen und sich vergewissern, dass keine Fehler aufgetreten sind.
  8. Auf die Kommandozeile wechseln (z. B. via Strg+Shift+C) und mit npm start die Anwendung starten. Dieser Befehl führt dazu, dass zum einen der TypeScript-Compiler die Sourcen nach JavaScript kompiliert und danach das Projektverzeichnis auf Änderungen überwacht. Zusätzlich startet er einen Web-Server auf Port 3000 samt Browser.

Kompilate (.map- und .js-Dateien) ausblenden

Um die aus .ts-Dateien kompilierten Dateien auszublenden wählt man die Option File | Preferences | User Settings. Anschließend trägt man das nachfolgend gezeigte Schnippsel ein. Die ersten beiden zu ignorierenden Dateien sind dabei den Standardeinstellungen von Visual Studio Code entnommen. Darauf folgt die Angabe, .js-Dateien auszublenden, sofern eine gleichnamige .ts-Datei existiert. Die letzte Zeile blendet sämtliche .map-Dateien aus.

{
    "files.exclude": {
        "**/.git": true,
        "**/.DS_Store": true,
        "**/*.js": { "when": "$(basename).ts"},
        "**/*.map": true
    }
}

 

Schulung und Beratung

Modern Web mit Angular 2

Datenbindung, Formulare, Validierung, Routing, HTTP, Komponenten, ...

Details

Migration auf Angular 2

Bestehende Projekte auf Angular 2 migrieren, ngUpgrade, ...

Details

Progressive Web-Apps mit Angular 2

InHouse-Schulung und/oder Beratung maßgeschneidert für Ihre Lernziele

Details

Architektur-Workshop

Interaktiver Prototyp-Workshop für Ihre Anwendung

Details

Entity Framework (EF)

Datenzugriff mit Entity Framework, Mapping-Szenarien, CRUD, Transaktionen, Migrations, Stored Procedures, Vererbung, Neuerungen in Version 7

Details

Angular 2: Deep Dive

Erweiterte Aspekte von Angular 2

Details

ASP.NET WebAPI

Web APIs mit ASP.NET, HTTP, REST, Security, Formatter, Tracing, OData, Streaming

Details

Web APIs mit ASP.NET MVC 6

Web APIs mit ASP.NET, HTTP, REST, Security, Formatter, Tracing, OData, Streaming

Details

Moderne Security-Szenarien für Web APIs

OAuth 2, OpenId Connect, JWT, Spielarten und Flows, ...

Details

Weitere Schulungen ...