Verwendung von Angular 2 in Visual Studio 2015, Tutorium

Schritt eins. Zubehör.

Als Erstes ist es notwendig, Visual Studio auf die Arbeit mit Node.js und NPM vorzubereiten, da alle Pakete, von denen Angular 2 abhängt, im NPM sind.

Installieren wir den NPM Task-Runner und den Package Installer. Diese werden für die Verbindung zwischen dem Studio und dem NPM benötigt.

Ein paar Worte über NPM und Windows.

Wie es sich herausgestellt hat, ist das Windows-Betriebssystem ziemlich originell. Bei der Installation von Node.js wird NPM automatisch mitinstalliert. Wenn man danach aber den NPM global installiert (über die -g-Option), ist es sehr wahrscheinlich, dass er an einem anderen Ort installiert wird.
Und er wird nicht verwendet werden.

Das Problem liegt in der Tatsache begründet, dass das Installationsprogramm bei der Installation von Node.js in die Variable der PATH-Umgebung den Pfad zu dem NPM reinschreibt, der mit ihm kommt. Deshalb wird beim Starten des NPM von einer Konsole der mitkommende NPM adressiert und nicht der globale.

Um dies zu beheben, gehen Sie wie folgt vor:

Finden Sie den Ort, an dem der globale NPM installiert wurde (Sie können dafür den Befehl npm root -g ausführen). Ersetzen Sie dann den Pfad zum Knoten-NPM im PATH durch den Pfad zum globalen NPM. Vergessen Sie nicht, dies sowohl für das System als auch für den Benutzer zu tun sowie das Gerät neu zu starten.

Nachdem die Erweiterungen installiert worden sind, starten wir das Studio und erstellen ein leeres Web-Projekt. Jetzt müssen wir node.js und NPM aktualisieren, die von Visual Studio verwendet werden. Das Studio verwendet die lokalen NPM und node.js, nicht die globalen. Es weiß nichts über die in Ihrem System installierten Dinge, da es sich auf node.js stützt, das in den externen Web-Tools ist. Wenn Sie dies nicht berücksichtigen, wird das Studio veraltete Komponenten verwenden, und Sie werden Ihre Anwendung nicht starten können. Also, klicken Sie auf das Projekt und wählen Sie “quick install package”. In dem erscheinenden Dialogfeld nun bitte “gulp” eintippen und es installieren. Natürlich ist dies kein Muss, aber, ehrlich gesagt, bin ich nicht darauf eingestellt, package.json manuell zu erstellen.

Nach der “gulp”-Installation erhalten wir ein package.json, mit dem wir arbeiten können.

Das Erste, was an dieser Stelle zu tun ist, ist, die Versionen von node.js und NPM zu überprüfen, mit denen unser Studio arbeiten wird.

Fügen wir den Abschnitt “scripts” mit den Befehlen «npm -v» und «node -v» ein und führen sie aus dem Taskrunner heraus aus.

package.json

{
  "name": "myproject",
  "version": "1.0.0",
  "devDependencies": {
    "gulp": "^3.9.1"
  },
  "scripts": {
    "getNpmVersion": "npm -v",
    "getNodeVersion": "node -v"
  }
}

Die Ergebnisse, die ich erhalten habe, waren ziemlich beeindruckend: Knoten v0.10.31 und NPM 1.4.9. Ich möchte noch einmal darauf hinweisen, dass dies die Versionen sind, die von Visual Studio verwendet werden, und weder der installierte Knoten, noch der globale NPM damit etwas im Moment zu tun haben.

Nun ist es an der Zeit, alles in Ordnung zu bringen. Wir fügen einen neuen Befehl zum package.json hinzu: “updateNpm”: “npm install npm@latest” und starten es. Nach einer kurzen Wartezeit starten wir die getNpmVersion. Der NPM wurde aktualisiert und hat jetzt die Version 3.10.5.

Dies wird jedoch nicht für node.js funktionieren. Ehrlich gesagt, habe ich keinen Weg gefunden, um node.js zu aktualisieren, aber ich konnte herausfinden, wie man das Studio dazu bringt, die Version von node.js zu nutzen, die ich brauche.

Finden Sie zunächst den Ort, wo Ihr node.js installiert ist, und kopieren Sie den Pfad dort rein. Nun gehen Sie über Tools -> Options -> Projects and Solutions zu External web tools und fügen Sie dort einen neuen Pfad ein, der das Studio zu der notwendigen Knoten-Version bringt (wenn da nichts da ist, einfach herunterladen und installieren). Vergessen Sie nicht, den neuen Pfad an den Anfang zu setzen. Starten Sie das Studio neu (dafür müssen Sie Windows nicht neu starten), und führen Sie den Befehl getNodeVersion aus. Sie sollten das Update erhalten.

Machen Sie hier eine Pause, es geht nicht unbedingt einfacher weiter.

Schritt zwei. Abhängigkeiten einstellen.

Fahren wir mit project.json fort. Installieren Sie darin alle Abhängigkeiten unserer Anwendung. Die Abhängigkeiten wurden von 5 MIN QUICKSTART heruntergeladen und für Windows bearbeitet, mit einem kleinen, aber sehr wichtigen Detail.

Das Arbeitsdetail.

Angular 2 ist auf TypeScript gebaut (wobei Quick Start auf reinem JavaScript vor einiger Zeit veröffentlicht wurde). Daher ist eine der Abhängigkeiten unserer “hello world”-Anwendung die TypeScript-Abhängigkeit, die wie folgt aussieht: “typescript”: “^1.8.10”. Dies bedeutet, dass beim Laden der Module die neueste Version von TypeScript heruntergeladen wird, die allerdings nicht älter als Version 1.8.10 ist. Überraschenderweise  unterstützt das uns zur Verfügung  stehende Quick Start nicht die neueste Version von TypeScript, weil beim Export das Schlüsselwort “default” erscheint. Zumindest ist es bei meiner Version so. Wichtig zu wissen ist, dass unser Angular 2 mit der neuesten Version nicht gestartet werden kann, wenn wir die Angabe aber bestimmen und einfach 1.8.10 einstellen, sollte alles in Ordnung sein.
Der Fehler wurde gemeldet; Ergebnisse werden erwartet.

package.json

{
  "name": "myproject",
  "version": "1.0.0",
  "devDependencies": {
    "gulp": "^3.9.1",
    "typescript": "1.8.10",
    "typings": "^1.0.4"
  },

  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",

    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",

    "angular2-in-memory-web-api": "0.0.14"

  },
  "scripts": {
    "postinstall": "typings install",
    "typings": "typings",
    "cmd": "npm typescript",
    "getNpmVersion": "npm -v",
    "getNodeVersion": "node -v"
  }
}

Schritt drei. TypeScript für Visual Studio konfigurieren.

Erstellen wir unsere erste .ts-Datei. Erstellen Sie in der Wurzel den Ordner “app” und fügen Sie dort eine leere app.component.ts-Datei ein. Es ist nicht ratsam, eigene Dateinamen zu kreieren, allein damit kann alles ruiniert werden. Schließen Sie nun das Studio.

Visual Studio und TypeScript! TypeScript und Visual Studio

In anderen Programmen werden die TypeScript-Einstellungen in einer separaten Datei konfiguriert – tsconfig.json, doch in Visual Studio ist alles anders. Wenn wir mit TypeScript im CommonJS-Modus arbeiten (und das ist der Modus, in dem wir arbeiten werden), ignoriert das Studio tsconfig.json. Dabei hat tsconfig.json zwei Optionen, die für uns von großer Bedeutung sind:
«emitDecoratorMetadata»: true,
«experimentalDecorators»: true.
Diese Flags werden in der .csproj-Datei manuell konfiguriert. Weitere Informationen dazu finden Sie hier.

Vollständigeres Set der Optionen  

<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
  <TypeScriptRemoveComments>false</TypeScriptRemoveComments>
  <TypeScriptSourceMap>true</TypeScriptSourceMap>
  <TypeScriptTarget>ES5</TypeScriptTarget>
  <TypeScriptJSXEmit>None</TypeScriptJSXEmit>
  <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
  <TypeScriptNoImplicitAny>False</TypeScriptNoImplicitAny>
  <TypeScriptModuleKind>System</TypeScriptModuleKind>
  <TypeScriptOutFile />
  <TypeScriptOutDir />
  <TypeScriptGeneratesDeclarations>False</TypeScriptGeneratesDeclarations>
  <TypeScriptNoEmitOnError>True</TypeScriptNoEmitOnError>
  <TypeScriptMapRoot />
  <TypeScriptSourceRoot />
  <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
  <TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata>
</PropertyGroup>

Öffnen Sie nun das Projekt, gehen Sie auf die Einstellungen und schauen nach der neuen Registerkarte – TypeScript Build.
Stellen Sie dort folgende Werte ein: EcmaScript 6 und Module System — Common Js. Speichern.

Schritt vier. Code.

Jetzt können wir mit dem Code-Schreiben in unserer app.component.ts beginnen.
Kopieren Sie das Folgende dort rein und „builden“ Sie das Projekt:

app.component.ts

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

Wenn alles gut geht, wird der Prozess fehlerfrei abgeschlossen. Das ist unsere Hauptkomponente oder, mit anderen Worten, unsere Anwendung.

Jetzt ist es an der Zeit, ihren Start (bootstrap) zu konfigurieren. Erstellen Sie die folgende Datei im Ordner “app”:

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

Jetzt nochmal zurück zum Projekt. Hier sollten an dieser Stelle ebenfalls keine Fehler mehr auftauchen. Eventuell ist es auch nicht notwendig, erneut zu „builden“, aber ich empfehle es trotzdem, um auf der sicheren Seite zu sein.

Fügen Sie dann in die Wurzel des Projekts Folgendes ein:

index.html

<html>
<head>
    <title>Angular 2 QuickStart</title>
    <meta charset=""UTF-8"">
    <meta name=""viewport"" content=""width=device-width, initial-scale=1"">
    <link rel=""stylesheet"" href=""styles.css"">
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src=""node_modules/core-js/client/shim.min.js""></script>
    <script src=""node_modules/zone.js/dist/zone.js""></script>
    <script src=""node_modules/reflect-metadata/Reflect.js""></script>
    <script src=""node_modules/systemjs/dist/system.src.js""></script>
    <!-- 2. Configure SystemJS -->
    <script src=""systemjs.config.js""></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
</head>
<!-- 3. Display the application -->
<body>
    <my-app>Loading...</my-app>
</body>
</html>

Danach fügen Sie bitte ebenfalls in die Wurzel noch Folgendes ein:

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    // map tells the System loader where to look for things
    var map = {
        'app': 'app', // 'dist',
        '@angular': 'node_modules/@angular',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        'rxjs': 'node_modules/rxjs'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': { main: 'main.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    };
    var ngPackageNames = [
      'common',
      'compiler',
      'core',
      'forms',
      'http',
      'platform-browser',
      'platform-browser-dynamic',
      'router',
      'router-deprecated',
      'upgrade',
    ];
    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    }
    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);
    var config = {
        map: map,
        packages: packages
    };
    System.config(config);
})(this);

Schritt fünf. Start.

Jetzt können wir unsere Anwendung starten.
Wenn alles gut gegangen ist, sollten Sie folgende Informationen auf dem Bildschirm sehen: My First Angular 2 App.

Der fertige Code ist auf github verfügbar.
Vielen Dank und viel Erfolg!