Ich verwendete Stackoverflow extensiv, um herauszufinden, wie Angular2 in Visual Studio 2015 Pro funktioniert. Keine wirklichen Antworten, aber hier ist, was ich gefunden habe, das funktioniert hat. Ich habe eine Reihe von Beispielen und Beispielen gesehen, wie Visual Studio 2015 Pro mit einem Angular2-Projekt funktioniert. Jetzt wird das ein wenig verwirrend mit allen Anweisungen, die Visual Studio Community verwenden oder einen anderen Editor verwenden. Hier habe ich meine eigenen Experimente und auch den Beginn eines guten Buches zum Thema "Angular 2 Development with Typescript" von Yakov Fain und Anton Moiseev gefunden. Erhältlich bei Manning-Publikationen. Wie auch immer, hier ist meine Grundeinstellung für ein Projekt.Starten eines Projekts auf Visual Studio 2015 für Angular2
Installieren Sie zuerst Nodejs, damit Sie es für Ihren Paketmanager verwenden können. Machen Sie sich keine Sorgen über NuGet, installieren Sie einfach das Windows-Installationspaket von der Website. Ich habe auch einen anderen Pakkage-Manager versucht, aber ich denke, Node hat die neuesten Pakete. Als nächstes können Sie npm init ausführen, und es wird eine Standarddatei package.json erstellt. Danach sie bearbeiten und es mehr oder weniger wie folgt aussehen:
{
"name": "helloworld",
"version": "1.0.0",
"description": "test npm setup",
"main": "main.ts",
"scripts": {
"start": "live-server"
},
"author": "name",
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"systemjs": "0.19.8",
"zone.js": "0.5.10"
},
"devDependencies": {
"live-server": "^0.8.2",
"typescript": "1.7.5"
}
}
Nachdem Sie nun die package.json Datei haben, als nächstes eine Eingabeaufforderung in Ihrem Projektverzeichnis zu erhalten, und geben Sie die folgenden Schritte aus:
Npm install
Dadurch wird ein Ordner node_modules erstellt, in dem alle Pakete für angular2 verfügbar sind.
Als nächstes müssen Sie zum Projekt/Eigenschaften/TypScript Build Abschnitt gehen und klicken Sie auf "CommonJS" im Modul System Abschnitt der Seite. Als nächstes müssen Sie mit der rechten Maustaste auf das Projekt klicken und es entladen, mit der rechten Maustaste klicken und bearbeiten. Suchen Sie nach dem folgenden Abschnitt:
<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
unten in der Nähe der Unterseite des Abschnitts fügen Sie die folgenden zwei Zeilen:
<TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata>
<TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
OK wir sind fast fertig. Sie müssen den node_modules Ordner gehen nach unten und finden:
/node_modules/typescript/lib/typescript.d.ts
und nimmt diese in einem Projekt mit der rechten Maustaste darauf und die Auswahl in Projekt enthalten. Ich denke, es gibt einige Änderungen in diesem, die die VS-Installation von Typescript mit Angular2 arbeiten lassen, nicht genug von einem Experten, um nur nach einer Tonne Versuch einen Fehler zu kennen, der der Hauptschlüssel ist. Jetzt auch, weil ich rote Squigles nicht sehen möchte, gehe in die Index.html oder was immer du deine Boot-HTML-Seite nennst und finde jede meiner Include-Quellen und schließe sie ein, nicht wesentlich weniger irritierend. Hier sind die Includes, die ich zu einer grundlegenden App habe:
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/typescript/lib/typescript.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
Ich kann nicht glauben, wie viele Stunden ich zu dieser Schlussfolgerung verbracht habe. Ich habe mehrere verschiedene und manchmal widersprüchliche Wege gelesen, um dies zum Funktionieren zu bringen. Ich hoffe, das hilft einem Neuling, den Buckel zu überwinden!
haben Sie versucht, 'tsconfig.json' hinzuzufügen und Typoskript-Konfiguration innerhalb dieser JSON-Datei .. Ich hatte ähnliches Problem mit meinem Code .. Sie könnten [diese Antwort] (http://stackoverflow.com/q/35094164/2435473) –
Eigentlich nein. Ich bin ein wenig neu in Angular und entschied mich, über angularjs zu angular2 zu springen. Ich kann es nicht beweisen, aber wenn Sie Ihr Projekt von innen laufen, vs ich denke, es ignoriert tsconfig.json Datei. Ich führe die App in Chrome, Sie können es nicht in IE ausführen, müssen aber Skript-Tags für diese hinzufügen. hab sie nicht zur Hand. –
Nachdem ich ein wenig weiter in dem Buch war, stieß ich auf einige Probleme mit den Pfaden in den Importen. Auch wenn ich kein Angular-Experte bin, habe ich mein Projekt auf a kopiert und die Dateien tsconfig.json und config.js hinzugefügt. An diesem Punkt bemerkte ich eine Änderung, die ich bis zum letzten VS2015-Update 2 nicht gesehen habe, VS hatte den gesamten Typescript-Abschnitt der Eigenschaften für das Projekt ausgegraut, und ich denke, eine Nachricht über die Verwendung von JSON-Konfiguration. Sooo ich weiß, dass es eine Tatsache ist, dass VS diese Knoten/Typoskript-Einstellungen verwendet. Beachten Sie, dass es nur in Chrome ausgeführt wird. Fehlende include .. –