Angular 4 “Hello World” mit Visual Studio 2015 Update 3, ASP.NET 4 und TypeScript (aktualisiert für Angular 4.0.3 Release)


Da es nicht jedem Entwickler vergönnt ist immer auf die neuesten Technologien zurückgreifen wie z.B. ASP.NET Core, dachte ich mir ich versuche es mal mit dem guten alten ASP.NET 4 und Angular 2. Aber das hat gedauert bis ich Angular 2 bei mir zum “Laufen” bekommen habe, denn es gibt für Angular 2 und den zugehörigen Abhängigkeiten kein NuGet Paket mehr. Denn leider scheint NuGet für viele JavaScript Bibliotheken an Bedeutung zu verlieren. Damit muss man auch in Visual Studio auf npm (Node Package Manager) und Konsorten zurückgreifen.

1. Erstellen einer ASP.NET 4 Anwendung

Als erstes erstellen man eine ASP.NET 4 Anwendung im Visual Studio und geht auf “File –> New –> Project” und wählt die “ASP.NET Web Application” aus.

image

Dann eine MVC Anwendung anlegen ohne Authentifizierung (enthält einfach weniger Code und die Authentifizierung wird in unserem Beispiel nicht benötigt).

image

2. NPM Konfiguration zu unserem Projekt hinzufügen

Da es leider kein NuGet Paket für Angular 2 gibt, muss man eine “package.json” im Root der Anwendung anlegen.

image

imageimage

welche Packages benötigt werden, findet man in der aktuellen Angular 2 Dokumentation, denn dabei handelt es sich nicht nur um eine einfache Angular 2 JavaScript Datei, sondern hier sind noch weitere Komponenten notwendig. Warum und weshalb kann man auch in der Dokumentation nachlesen. Aktuell sieht die Json Datei dann z.B. folgendermaßen aus

ACHTUNG: Ich habe zu den Abhängigkeiten die auf der Angular Seite angezeigt werden, noch die aktuelle “gulp” Version hinzugefügt (Warum erläutere ich weiter unten)

ACHTUNG: Wenn man von der Beta auf die RC Version aktualisiert, würde ich empfehlen den node_modules Ordner vorher einmal zu löschen, da Angular jetzt in einem anderen Order zu finden ist und sich sehr viel strukturell geändert hat.

ACHTUNG: Ich gebe inzwischen die Versionsnummern nur noch ohne „~“ und „^“ davor an. Denn damit hatte ich in der letzten Zeit vor allem bei den devDependencies immer wieder Probleme, das hier Pakete veröffentlicht wurden so das dass Projekt am ende nicht mehr funktioniert hat und wenn man „~“ und „^“ weglässt kann man sich „sicher“ sein das man genau die Pakete wieder bekommt und das alles noch funktioniert wie bisher.

Wenn man jetzt mit der rechten Maustaste auf die package.json geht, gibt es dort einen Punkt “Restore Packages”, mit diesem werden wie bei NuGet alle Pakete heruntergeladen für unsere package.json. In ein Verzeichnis mit dem Namen “node_modules”. Das Verzeichnis wird NICHT unserem Projekt hinzugefügt und kann nur angezeigt werden, wenn man versteckte Dateien einblendet.

image

Wenn Ihr glück habt, werden alle Dateien heruntergeladen. Das sieht man, wenn man die Output Konsole öffnet und “Bower/npm” als Ausgabe anzeigen lässt, wenn hier keine Fehler auftreten ist alles OK.

image

Bei mir kam es hier aber zu einem Fehler, da Visual Studio seine eigene Installation von npm mit sich bringt, diese aber zum Herunterladen der Komponenten “veraltet” war, musste ich die neuste Version von npm installieren und dann im Visual Studio eintragen. Dafür geht man in die QuickLaunch box rechts oben und tippt “External Web Tools” ein und wählt den Eintrag aus. (siehe auch Visual Studio 2013/2015 bereitgestellte nodejs Version veraltet)

image

In “External Web Tools” dann den Pfad zum aktuellen nodejs Verzeichnis hinzufügen und den Eintrag an den Anfang verschieben. Dann am besten Visual Studio noch einmal neu starten und versuchen das “Restore Packages” noch einmal auszuführen, diesmal hoffentlich ohne Fehler.

image

HINWEIS: Mit dem Update auf Angular 2 RC1 kam es bei mir zu einem weiteren Fehler und im Output Fenster für “Bower/npm” stand z.B. folgende Fehlermeldung:

npm ERR! 404 '@angular/http' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it

Ab der RC1 von Angular 2 ist wichtig das man mindestens NodeJs 6.x installiert hat und NPM mindestens Version 3.8.9 installiert hat, denn nur dann werden die neuen Packages erkannt und können heruntergeladen werden. Leider geht bei mir zumindest die IntelliSense für die Erkennung der Versionsnummern im package.json für die Angular Pakete mit dem “@” davor nicht mehr.

3. Wozu ist überhaupt dieses “gulp” da?

Wir haben zwar unsere Module alle heruntergeladen die in der package.json eingetragen waren, aber diese liegen in einem eigenen Verzeichnis “node_modules” in dem noch viel mehr Dateien liegen. Mit gulp kann man eine einen “Task” erstellen der z.B. vor jedem starten des Projekts alle für uns wichtigen JavaScript oder Stylesheet Dateien in den lokalen Scripts oder Styles Ordner kopiert oder temporäre Dateien löscht oder Minifizierungen durchführt. Dafür muss im Root unserer Webseite eine “gulpfile.js” angelegt werden mit dem folgenden Inhalt.

Wenn man jetzt mit der rechten Maustaste auf die “gulpfile.js” klickt, gibt es einen Punkt “Task Runner Explorer”, diesen bitte anklicken.

image

und es öffnet sich ein neues “Fenster”. Wenn dies noch “leer” aussieht, dann am besten Visual Studio neu starten.

image

Nach dem Neustart sollte das ganze folgendermaßen aussehen

image

Mit der rechten Maustaste auf “moveToScripts” kann man das ganze auch direkt einmal ausführen und wenn das Ausführen erfolgreich war, können wir in unseren Scripts Ordner gehen und hier alle Dateien anzeigen lassen, denn diese wurden nicht dem Projekt hinzugefügt, sondern nur in den Ordner kopiert.

image

image

Ich habe diese dann in das Projekt eingebunden mit “Include In Project”

image

Update Angualar 2.1.1: In der neuesten Version, kopiere ich die Dateien aktuell nicht mehr per Gulp ins lokale Scripts Verzeichnise, sondern verweise direkt auf die Pfade im node_modules ordner, da dieser sowieso vorhanden sein muss und dies erspart uns vorerst etwas Konfigurationsaufwand. Für den Produktivmodus wäre es aber mit sicherheit besser diese per Bundle auszuliefern.

3.1 TypeScript Einstellungen (veraltet ab VS 2015 Update 3)

Am besten ist es wenn man die neuste Version von TypeScript installiert hat, denn bei mir gab es erst ab Version 1.8 keine Probleme mehr, obwohl eigentlich 1.5 ausreichen sollte. Dann müssen wir eine erste TypeScript Datei in unserem Projekt hinzufügen, am besten unter: “ScriptsApp/app.modules.ts”.

scriptappordner

Jetzt öffnen wir die Einstellungen (Properties) der Webseite und schauen uns die “TypeScript Build” Einstellungen an, jetzt sollten die Einstellungen auch in der csproj generiert sein.

image

Ich habe es leider nicht hinbekommen in der alten Visual Studio Version 2015 Update 2 TypeScript über eine “tsconfig” zu konfigurieren in der Neuesten Version von VS 2015 Update 3 ist dies auch mögloch über die tsconfig (weiter unten eine genauer Erläuterung dazu).

Da Angular 2 mehrere “experimentelle TypeScript Features” verwendet  die erst noch aktiviert werden müssen. Muss man die “csproj” Datei der Webseite bearbeiten, denn die Features die man benötigt, können nicht in den Einstellungen der Webseite eingestellt werden. Dafür muss die Webseite entladen werden mit “Unload Project”.

image

Danach kann man wieder mit der rechten Maustaste auf das entladene Projekt gehen und es bearbeiten mit “Edit …csproj”. Und in der csproj am besten nach “TypeScriptTarget” suchen und schon sieht man einen Block in dem einige TypeScript Einstellungen vorgenommen werden können.

image

Ich konnte mein Projekt mit Angular 2 erst erstellen, nach dem ich den folgenden Block mit Einstellungen für TypeScript eingefügt habe und alle anderen TypeScript Settings damit überschrieben habe.

sonst kam beim Erstellen der TypeScript Dateien immer der Fehler “module not found” und das Projekt konnte nicht kompiliert werden. Jetzt kann man die csproj wieder schließen und unser Projekt wieder laden.

TypeDefinitions für Angular 2 brauchen wir dem Projekt keine hinzufügen, diese scheint er sich über den “node_modules” Ordner (obwohl dieser ausgeblendet ist) bereits selbst zu suchen, denn dort sind bereits alle wichtigen TypeDefinitions mit enthalten (hierbei handelt es sich aber nur um meine aktuellen Beobachtungen, wenn hier jemand genaueres weiß warum das funktioniert, freue ich mich über einen Kommentar).

3.2 TypeScript Einstellungen über tsconfig.json

Ab Visual Studio 2015 Update 3 ist es auch möglich in älteren MVC Projekten auf die tsconfig.json zurückzugreifen und nicht mehr wie in 3.1  beschrieben über die Projekteinstellungen. Dafür muss im Root der Webseite, da wo auch die „package.json“ liegt eine „tsconfig.json“ angelegt werden mit dem folgenden Inhalt.

Wenn alles geklappt hat und man die Projekteigenschaften aufruft für die „TypeScript-Build“ Einstellungen, sollte hier  alles deaktiviert sein und angeben sein das mindetens eine „tsconfig.json“ gefunden wurde in der jetzt die Einstellungen konfiguriert werden.

typescriptbuildsettings

4.Typings installieren für Visual Studio (Veraltet ab TypeScript Version 2.0+)

Damit Visual Studio auch alle Typen erkennt, muss man noch die passende index.d.ts Datei hinzufügen. Und am einfachsten installiert man diese mit der Package Installer Extension, hier muss nur „Typings“ ausgewählt werden und „es6-shim“ eingetragen werden und schon werden die passenden Typings installiert.

image.png

Der Pfad zur index.d.ts Datei wird dann in der boot.ts entsprechend angegeben. Die von NPM hinzugefügten Dateien werden NICHT dem Projekt hinzugefügt.

image

4.1 Typings in Visual Studio ab TypeScript 2.0+

Sobald man TypeScript 2.0 oder höher verwendet, kann man auf die Typings „verzichten“ und diese werden direkt in der tsconfig.json eingestellt. Hier kommt bei „compileroptions“ das Property „lib“ hinzu. Bei lib handelt es sich um ein Enum in dem man die Umgebung angeben kann die in den TS Dateien bekannt gemacht werden soll, damit z.B: Promises erkannt werden. Wenn man zusätzlich auch noch bestimmte Typen benötigt die man über npm installiert hat wie z.B. jasmine mit „@types/jasmine“ dann gibtes noch ein neues Property „types“ hier kann man dann die customtypes noch angeben die in den TS Dateien bekannt sein sollen.

Daher wird auch in der „boot.ts“ kein Verweis mehr auf die „index.d.ts“ benötigt und kann entfernt werden. Ebenso kann die „typings.json“ und der Ordner „typings“ entfernt werden.

ACHTUNG es reicht nicht aus den Ordner „typings“ aus dem Projekt auszuschließen dieser muss auch im Filesystem entfernt werden, sonst kommt es zu Fehlern, das z.B. Promise bereits bekannt ist.

5. Angular 2 “Hello World App”

So jetzt nachdem wir unser Projekt entsprechend vorbereitet haben, können wir auch noch unsere Angular 2 Anwendung schreiben.

Dazu erstellen wir noch zwei TypeScript Dateien „boot.ts“ und „app.module.ts“ auch direkt im „ScriptsApp“ Verzeichnis.

scriptappordner

Der Inhalt der boot.ts sieht folgendermaßen aus.

HINWEIS: “./” vor mainApp gibt an das im aktuellen Verzeichnis nach der Datei gesucht werden soll.

Die „boot.ts“ Datei gilt als Einstieg in unsere Anwendung und ruft die „app.module.ts“ Datei auf in der alle wichtigen globalen Module, Componenten und Services definiert sind und die dann auch unsere Anwendung die „app.component“ enthält.

für die app.component.ts sieht der Code folgendermaßen aus und “my-app” ist der Selector mit dem wir unsere neue Komponente entsprechend anzeigen können.

ACHTUNG: Wenn man von Angular 2 Beta zur RC Updated müssen auch alle Pfade in den imports aller Projektdateien angepasst werden und aus “angular2” wird “@angular” z.B. aus “angular2/core” wird “@angular/core”.

Dann habe ich die _Layout.cshtml etwas aufgeräumt und nur noch die wichtigsten Einträge hinzugefügt, wie die Verweise auf unsere JavaScript Dateien und das Einrichten von SystemJs um unsere Dateien zu laden sowie unser neues Tag “my-app”.

Angular 2 selbst wird in den Scripts seit der RC nicht mehr direkt verlinkt, sondern dafür wird jetzt die SystemJs Konfiguration verwendet.

6. SystemJs konfigurieren

Damit Angular auch weiß wo er welche Module für Angular 2 zu finden sind, muss SystemJS noch konfiguriert werden. Ich habe dafür eine Datei mit dem Namen “systemjs.config.js” im Scripts Verzeichnis angelegt. In dieser Datei werden alle verwenden Angular 2 Module definiert und es wird angegeben wo diese zu finden sind. Ich habe diese im node_modules Ordner gelassen, denn im Beispiel auf der Angular 2 Seite wird es ebenfalls so gehandhabt. Mir ist hier aufgefallen, das die „systemjs.config.js“ jedes mal „anders“ aussieht und aufgeräumter wirkt, daher wenn Ihr Angular aktualisiert prüft auch nach ob Ihr evtl. die „systemjs.config.js“ mit anpassen müsst.

Hinweis: Für die Produktive Bereitstellung einer Angular 2 Anwendung sollte man z.B. webpack 2 verwenden, hier werden alle wichtigen Bibliotheken in eine JavaScript Datei zusammengefasst und nicht wie bei SystemJs 300+ Requests beim Aufrufen der Seite erzeugt. Ich habe dafür den folgenden Artikel erstellt „Angular 2 mit webpack 2 mit ts, less, sass Loader für Anfänger in Visual Studio 2015

Wenn man jetzt die Webseite startet, dann sollte das ganze funktionieren und im Browser z.B. folgendermaßen aussehen.

image

Wenn nichts angezeigt wird, am besten die Entwicklerkonsole öffnen und schauen was für ein Fehler angezeigt wird, diese sind wie ich finde inzwischen doch recht aussagekräftig, zumindest im Vergleich zu NG1.

HINWEIS: Es muss Resharper ab Version 2016.2 verwendet werden, da sonst die Componenten nicht erkannt werden oder die neuen Angular Tags im HTML nicht erkannt und werden und dann rot unterstrichen sind.

HINWEIS: Wenn Ihr „automatisch“ aus euren .NET WebAPI oder Controller Aufrufen einen Angular 2 Service erstellen wollt, dann versucht doch einmal den ProxyGenerator. Der besteht aus einem T4 Template mit dem Ihr voll typisierte Angular 2 Services erstellen könnt direkt aus den .NET Klassen.

Quelle:

http://www.mithunvp.com/angular-2-in-asp-net-5-typescript-visual-studio-2015/

https://yakovfain.com/2016/05/06/starting-an-angular-2-rc-1-project/

Das zugehörige Projekt auf meiner GitHub Seite sollte voll funktionsfähig sein. Aber bitte daran denken das man die passenden NPM Befehle noch ausführen muss für die Typings und den Package Restore für die package.json.

https://github.com/squadwuschel/Angular2Introduction/tree/master/Angular2HelloWorld

Alternativ gibt es noch eine etwas erweiterte Einführung in der auch der Ui-Router eingebunden ist und man sieht wie man einen Service einbindet.

https://github.com/squadwuschel/Angular2Introduction/tree/master/Angular2Introduction/Angular2Introduction

Updated from Angular 2.0 RC1 to RC2

Für das Update von RC1 auf RC2 habe ich lediglich die „package.json“ aktualisiert und die „systemjs.config.js“ an das Beispiel vom Angular Quickstart angepasst und schon sollte alles wieder funktionieren.

Updated from Angular 2.0 RC2 to RC3

Einfach nur die „package.json“ angepasst und die Pakete aktualisiert.

Updated from Angular 2.0 RC3 to RC4

Einfach nur die „package.json“ angepasst und die Pakete aktualisiert.

Updated from Angular 2.0 RC4 to RC5

Einfach nur die „package.json“ angepasst und die Pakete aktualisiert. Außerdem wurde das Beispiel um eine „appModule.ts“ Datei erweitert in der jetzt per „ngModule“ Decorator Globale Importe für das gesamte Projekt definiert werden können wie HTTP_PROVIDERS oder FormsModule für „(ngModule)“. Die Datei ist jetzt auch in der offiziellen Hello World Anwendung von Angular 2.0 vorhanden und ich habe mein Beispiel nur entsprechend angepasst.

Updated from Angular 2.0 RC5 auf Angular 2.0.0 Release

Die „package.json“ angepasst und die Pakete aktualisiert. Außerdem habe ich die Typings aktualisiert und es gibt jetzt keine „browser.d.ts“ Datei mehr, sondern eine „index.d.ts“ auf die für die passendne Typings verwiesen werden muss. Wenn man bereits ein größeres Beispiel hatte welches z.B. HTTP_PROVIDERS verwendete, kommt es zu einem Fehler denn diese gibt es nicht mehr, sondern nur noch das „HttpModule“. Außerdem gibt es in „@component“ nicht mehr den Verweis auf „directives“ die darin verwendet werden, sondern diese werden jetzt alle in ngModule eingetragen. Das Beispiel auf meiner GitHub Seite verwendet die ngModules bereits und definiert auch dort die passenden Components.

Update from Angular 2.0.0 auf 2.1.1 (31.10.2016)

Ich habe die tsconfig.json hinzugefügt um eine alternative für die TypeScript Kompillierung für Visual Studio 2015 ab Update 3 und älteren MVC Projekten zu zeigen. Außerdem habe ich eine komplet Neue Angular 2 Hello World Anwendung auf Github hinzugefügt.

Update (07.12.2016) – Es gibt es jetzt einen neuen Artikel der die Verwendung von Angular 2 mit Webpack 2 beschreibt und nicht mit SystemJs.

Update (28.02.2017) – package.json angepasst auf Angular 2.4.0 und eine neue Möglichkeit Typings in Visual Studio zu verwalten hinzugefügt – denn ab TypeScript 2.0 wird kein „typings“ Ordner mehr benötigt in Visual Studio.

Update (16.05.2017) – package.json angepasst auf Angular 4.0.3

Advertisements

11 Gedanken zu „Angular 4 “Hello World” mit Visual Studio 2015 Update 3, ASP.NET 4 und TypeScript (aktualisiert für Angular 4.0.3 Release)

  1. Victor M. Lopez Jr.

    This won’t run in VS2015. I get the following errors
    Build: Cannot find module ‚angular2/platform/browser‘
    Build: Cannot find module ‚angular2/core

    I also downloaded your demo app from Github and that project received the same errors. Do you know of a workaround?

    Thanks.

    Gefällt mir

    Antwort
    1. SquadWuschel Autor

      Hi,
      I am updating my current GitHub Project to Angular 2 Rc and I need to update this post to run on RC mode. They have changed a lot from beta to RC. But when you follow my instructions with beta and my posted dependencies the project should run. The Errors you wrote are from the RC release and I think the angular 2 modules failed to restore from npm, you need the newest version from nodejs and npm.

      Gefällt mir

      Antwort
  2. Alexander Bartz

    Hallo!

    Erst einmal vielen Dank für das ausführliche Tutorial! Leider steht man ohne diese Informationen etwas ratlos da, wenn man sich mit npm & Co. nicht so gut auskennt aber gezwungen ist Visual Studio und MVC zu verwenden.

    Beim Update des Artikels auf RC1 (super, dass dies hier überhaupt berücksichtigt wurde!), ist wohl eine Stelle übersehen worden, so dass die Anleitung so nicht funktioniert: Die Angular Komponenten werden noch in Scripts/App/ angelegt, die SystemJS Config geht aber von dem Verzeichnis AppScripts aus.

    Super Arbeit, weiter so :)

    Gefällt mir

    Antwort
    1. SquadWuschel Autor

      Danke dir für die Hinweise, ich versuche das noch mit zu korrigieren und die Hinweise für den IE 11 mit einzufügen. Sobald ich meine WordPress Probleme in den Griff bekommen habe :-/

      MFG
      SquadWuschel

      Gefällt mir

      Antwort
  3. Alexander Bartz

    Der RC1 scheint ohne Weiteres nicht im IE 11 zu laufen. Ich konnte das Problem umgehen indem ich direkt vor dem Einbinden der Scripts in der html Seite diese Scripts referenziere:

    https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js
    https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js
    https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js

    Vielleicht hilft es ja jemandem…

    Quelle: https://github.com/chsakell/aspnet5-angular2-typescript/issues/11

    Gefällt mir

    Antwort
  4. Pingback: Angular 2.0 Released | SquadWuschel's Blog

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s