Angular 2 Beta: Visual Studio ASP.NET MVC

Question

Ich habe eine Anwendung für Angular 2 Alpha 45 gebaut und es funktionierte wunderbar, aber ich musste viel herumspielen, um es zum Laufen zu bringen. Ich verstehe Angular 2, aber ich verstehe nicht, wie es funktioniert, um tatsächlich mit Angular 2 zu starten.

Ich versuche einen sauberen Build der 'Angular 2: 5 min Quickstart'. Es gibt eine Reihe von Problemen, und ich werde so genau wie möglich sein. Ich möchte erfahren, warum diese Probleme auftreten und hoffentlich beheben. Visual Studio 2015 Update 1, Typescript 1.7.

Typoskriptkonfiguration: Der Schnellstart enthält eine tsconfig.json-Datei.

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "system", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false 
}, 
"exclude": [ 
    "node_modules" 
] 
} 

Ich bin nicht sicher, ob dies alles, obwohl der Fall ist, wie ich hatte die ProjectName.csproj Datei zu bearbeiten und die Zeile: <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators> an den Experimental Zierer Fehler loszuwerden. https://github.com/Microsoft/TypeScript/issues/3124 scheint darauf hinzuweisen, dass die tsconfig-Datei in/Scripts funktionieren muss, aber das funktioniert auch nicht für mich.

Ich möchte entweder wissen, wie diese tsconfig-Datei zu arbeiten, oder um die .csproj-Datei zu bearbeiten, um die gleichen Compiler-Optionen zu erhalten. Wenn Sie in den Projekteigenschaften> Typescript Build nachsehen. Sind diese was wichtig? Sollte das Modulsystem sein: System?

Meine Dateistruktur ist die gleiche wie der Quickstart.

app/ 
    app.component.ts 
    boot.ts 
node_modules/ 
    blah 
index.html 
tsconfig.json 
package.json 

Ich habe Powershell verwendet, um npm install auszuführen, um alles im Verzeichnis node_modules zu erhalten.

import {Component} from 'angular2/core'; zeigt einen Fehler an. ../node_modules/angular2/core'; zeigt den Fehler nicht an, aber wenn Sie das Projekt erstellen, erhalten Sie viele Buildfehler in Dateien in node_moduels/angular2/src/*. Jetzt kann ich vielleicht gehen und diese Probleme manuell beheben, aber ich habe das Gefühl, dass die Konfiguration falsch ist, wenn diese Fehler auftreten. Das tsconfig scheint node_modules ausschließen zu wollen. Warum kann ich 'angular2/core' nicht verwenden und muss stattdessen einen relativen Pfad dazu verwenden? Wenn ich die node_modules in das Visual Studio-Projekt einfüge, gibt es eine wahnsinnige Menge an Build-Fehlern in der node_modules. Separat: Ich mache diesen sauberen Build, weil ich nicht herausfinden konnte, wie ich das Projekt von Alpha 45 auf Beta 0 aktualisieren könnte. Das Beheben von Bugs in meinem Projekt von Angular 2 Änderungen wird einfach sein, aber die App laden Module im Moment ist unmöglich.

Der nächste Teil wird unter der Annahme, ich an den Buildfehler erhalten: In index.html gibt es das:

System.config({ 
    packages: { 
    app: { 
     format: 'register', 
      defaultExtension: 'js' 
     } 
    } 
}); 
System.import('app/boot') 
    .then(null, console.error.bind(console)); 

ich nie die System.import('app/boot') bekommen haben, ohne Angabe der Dateierweiterung zu arbeiten. Ist dies ein Visual Studio-Problem oder ist es ein .NET MVC-Problem? Wenn ich die Dateierweiterung in index.html gebe, dann erhalte ich 404s mit System.js, die versuchen, die Komponentendateien ohne eine Dateierweiterung zu finden (obwohl die Konfiguration defaultExtension: 'js' hat. Ist das, weil ich die js Dateien in meinem Projekt einschließen muss? Dann wenn ich an dieser Frage zu bekommen, muss ich mit

system.src.js:1049 GET http://localhost:63819/angular2/http 404 (Not Found) 

beschäftigen habe ich nicht einen einzigen Build-Fehler haben, aber jetzt System.js ist nichts zu laden.

Ich glaube, das sind alles Probleme, die von verschiedenen Systemen erstellt werden, die das Typoskript unterschiedlich interpretieren. Ich habe das Gefühl, dass ich nicht klar war, aber ich weiß nicht, wie ich das klarstellen soll. Ich würde wirklich jede Hilfe und Führung schätzen, die Sie mir geben könnten. Ich fühle mich, als hätte ich seit Tagen eine Antwort darauf gesucht.

Answer 1

Ich bin generell zufrieden mit neuen Dingen mit asp.net 5 vnext und Angular 2. Aber Rigging Angular 2 in Visual Studio war ein Aufwand. Ich folgte die angular.io Kurzanleitung religiös und hatte kein Glück einen der Hallo Angular 2 App läuft immer, bis ich den folgenden Code verwendet:

<script src="~/lib/anguar2/angular2-polyfills.js"></script> 
 
<script src="~/lib/es6-shim/es6-shim.js"></script> 
 
<script src="~/lib/systemjs/system.js"></script> 
 
<script> 
 

 
    System.config({ 
 
     defaultJSExtensions: true 
 
     
 
    }); 
 

 
</script> 
 
<script src="~/lib/rxjs/rx.js"></script> 
 
<script src="~/lib/anguar2/angular2.min.js"></script> 
 
<script> 
 
    System.import('js/boot'); 
 
</script>

Ich wünschte, ich hätte ein besseres Verständnis warum das funktioniert, und das kantige boilerplate nicht. Aber zumindest habe ich es funktioniert. Hoffe das hilft.

Answer 2

Ich habe genau die gleichen Probleme (Arbeitsprojekt Alpha 48, gleiche Fehler mit Beta 0 und so weiter). Meine Arbeitsdateien (MVC-Projekt):

App/boot.ts

/// <reference path="../node_modules/angular2/manual_typings/globals-es6.d.ts" /> 
/// <reference path="../node_modules/angular2/typings/es6-shim/es6-shim.d.ts" /> 
import {bootstrap} from '../node_modules/angular2/platform/browser' 
import {AppComponent} from './app.component' 
bootstrap(AppComponent); 

App/app.component.ts

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

Ansichten/Shared/_Layout.cshtml

<head> 
... 
<script src="~/node_modules/es6-shim/es6-shim.min.js"></script> 
<script src="~/node_modules/angular2/bundles/angular2-polyfills.js"></script> 
<script src="~/node_modules/systemjs/dist/system.src.js"></script> 
<script> 
System.config({ 
    defaultJSExtensions: true, 
    packages: { 
    'app': { format: 'register', defaultExtension: 'js'} 
    }, 
    paths: { 
    'angular2/*': 'node_modules/angular2/*', 
    'rxjs': 'node_modules/rxjs/bundles/Rx.js' 
    } 
}); 
</script> 
<script src="~/node_modules/rxjs/bundles/Rx.js"></script> 
<script src="~/node_modules/angular2/bundles/angular2.dev.js"></script> 
<base href="/"> 
@Scripts.Render("~/bundles/modernizr") 
... 
</head> 

Ansichten/Home/Index.cshtml

<my-app>Loading...</my-app> 
<script> 
    System.import('App/boot') 
    .then(null, console.error.bind(console)); 
</script> 

Es funktionierte für mich, nachdem ich 'Pfade' in system.config hinzugefügt.

Answer 3

Ich hatte am Anfang auch einige Probleme, aber sie sind meistens einfach zu beheben.

TSConfig Äquivalent

Zunächst wird das Projekt-Setup:

<TypeScriptToolsVersion>1.7.6</TypeScriptToolsVersion> 
<TypeScriptModuleKind>system</TypeScriptModuleKind> 
<TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators> 
<TypeScriptEmitDecoratorMetadata>true</TypeScriptEmitDecoratorMetadata> 
<TypeScriptAdditionalFlags> $(TypeScriptAdditionalFlags) --experimentalDecorators </TypeScriptAdditionalFlags> 
<TypeScriptAdditionalFlags> $(TypeScriptAdditionalFlags) --emitDecoratorMetadata </TypeScriptAdditionalFlags> 

System-Modul ist richtig, aber überprüfen, ob es richtig in Ihre HTML-Datei enthalten ist. Sie können es auch in Ihrem Projektoptionen-Fenster auswählen.

Abhängig von Ihrer VS-Version müssen Sie die Flags in zusätzlichen Flags (älteren Versionen) oder in den dedizierten Tags angeben. Sie müssen Quellmaps und Zielversion in Ihren Projektoptionen überprüfen (es5 ist natürlich EcmaScript 5 in der EcmaScript-Version).

Vergessen Sie nicht, die neueste TypeScript-Version zu installieren, sonst funktionieren RxJs nicht.

Angular2 Dateien

Während des Downloads angular2 über npm Sinn macht, würde ich nicht node_modules direkt in Ihrem Typoskript Ordner enthalten. Das Einbeziehen des gesamten Ordners bedeutet, dass jedes andere Knotenmodul mitgenommen wird, wie zum Beispiel Schluck.Stattdessen können Sie einfach den gesamten angular2-Ordner in Ihrem Typoskript-Verzeichnis im Content-Ordner kopieren (Sie können dies automatisch mit einem Schluck oder einer einfachen Bat-Datei tun, wenn Sie möchten).

Über die Typoskriptfehler besteht das Problem, dass Visual Studio versucht, alle Dateien in Ihren angular2-Ordnern zu analysieren, und einige dieser Dateien werden dupliziert. Sie müssen die Quellen entfernen und nur die kompilierten js-Dateien und die Typdefinitionen beibehalten. Das heißt:

• Entfernen/es6 (sie die Dateien verwendet, um die Entwicklung in es6 statt Typoskript sind)
• entfernen/ts (die Quelldateien)
• entfernen Bündel/Typisierungen (zusaetzliche Defintion-Dateien für es6-Shim und Jasmin)

Sie müssen die rxjs Ordner auf der gleichen Ordnerebene wie angular2, da sonst das wird nicht funktionieren, enthält, das heißt:

Content 
    typings 
     angular2 
     rxjs 
     mymodule 
      whatever.ts 
     boot.ts 

In Ihren HTML-Dateien können Sie die js-Dateien in den Bundle-Ordnern von angular2 und rxjs verknüpfen.

<script src="https://code.angularjs.org/tools/system.js"></script> 
<script src="/content/typings/angular2/bundles/angular2-polyfills.js"></script> 
<script src="/content/typings/rxjs/bundles/Rx.min.js"></script> 
<script src="/content/typings/angular2/bundles/angular2.dev.js"></script> 
<script src="/content/typings/angular2/bundles/router.dev.js"></script> 

Dann wird Ihre Importe wie folgt aussehen:

import { Component } from 'angular2/core'; 

Systemkonfiguration

Um die Importe zu machen arbeiten, müssen Sie System konfigurieren. Die Konfiguration ist ziemlich einfach:

 System.paths = { 
      'boot': '/content/typings/boot.js', 
      'mymodule/*': '/content/typings/myModule/*.js' 
     }; 
     System.config({ 
      meta: { 
       'traceur': { 
        format: 'global' 
       }, 
       'rx': { 
        format: 'cjs' 
       } 
      } 
     }); 
     System.import('boot'); 

Fügen Sie diesen Code nach die Script-Tags für Winkel- und alle anderen librairies.

Da Angular2 global (über die Script-Tags) enthalten ist, müssen Sie es nicht zur Systemkonfiguration hinzufügen. Dann in Ihre Dateien können Sie Ihre Module auf diese Weise importieren.

import { MyThing } from "mymodule/whatever"; 

Answer 4

Vergewissern Sie sich in Visual Studio 2015 Update 1, Typoskript 1.7 * Und auch Sie können laufen 'Angular 2: 5 min Quickstart'.

Das Problem, das Sie als VS2015 "externe Web-Tools" haben eine zu alte Version

Nach VS 2015 Web Application erstellt asp.net5, klicken Sie zeigen alle Datei dann package.json löschen und node_modules Ordner und fügen Sie package.json nochmal.

Wenn oben funktioniert das nicht sehen: http://jameschambers.com/2015/09/upgrading-npm-in-visual-studio-2015/

Answer 5

Wenn Sie oben sind und mit npm läuft installieren Sie Ihre Abhängigkeiten in node_modules holen, hier ist, wie sie zu benutzen, dort an Ort und Stelle, ohne sie in ein bewegen zu müssen/lib oder/Scripts-Verzeichnis oder die Art und Weise ändern Sie Ihre Typoskript Dateien aus dem Weg zu schreiben in dem Quickstart gezeigt:

Eigenschaften Projekt -> Typoskript

Für „Modulsystem“ Build, Wählen Sie „System“:

Set Typoskript Compiler-Optionen

Bei der Verwendung von ASP.NET Core Set Optionen in tsconfig.json:

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "system", 
    "moduleResolution": "node", 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true 
}, 
"exclude": [ 
    "node_modules" 
] 
} 

Wenn Sie ASP.NET verwenden (Non-Core), legen Sie die Compileroptionen in der csproj-Datei fest. (Text & Tabellen zur Einstellung Compiler-Optionen: https://github.com/Microsoft/TypeScript/wiki/Setting-Compiler-Options-in-MSBuild-projects) in einem Texteditor die Property mit den anderen Typoskript Optionen finden und fügen Sie in:

<TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators> 
<TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata> 
<TypeScriptModuleResolution>node</TypeScriptModuleResolution> 

laden Quelldateien in der richtigen Reihenfolge

In Ihrem index.html Richten Sie Ihre Skripte in dieser Reihenfolge ein, um sicherzustellen, dass Module aus dem Ordner node_modules geladen werden (Sie müssen rxjs und angular2 bundles nach laden, um System.config auszuführen. Andernfalls lädt der Systemlader die eckigen/rxjs-Quelldateien seither erneut herunter registrierte sie nicht mit dem richtigen Pfad)

<!-- load system libraries --> 
<script src="~/node_modules/es6-shim/es6-shim.min.js"></script> 
<script src="~/node_modules/systemjs/dist/system-polyfills.js"></script> 
<script src="~/node_modules/angular2/bundles/angular2-polyfills.js"></script> 
<script src="~/node_modules/systemjs/dist/system.js"></script> 

<!-- configure system loader first --> 
<script> 
    System.config({ 
     defaultJSExtensions: true, 
     paths: { 
      'angular2/*': 'node_modules/angular2/*', 
      'rxjs/*': 'node_modules/rxjs/*' 
     } 
    }); 
</script> 

<!-- load app bundles *after* configuring system so they are registered properly --> 
<script src="~/node_modules/rxjs/bundles/Rx.js"></script> 
<script src="~/node_modules/angular2/bundles/angular2.js"></script> 

<!-- boot up the main app --> 
<script> 
    System.import("app/main").then(null, console.error.bind(console)); 
</script> 

App Typoskript die Standard-Import-Syntax verwenden können, ist hier app/main.ts:

import {bootstrap} from 'angular2/platform/browser' 
import {AppComponent} from './app.component' 
bootstrap(AppComponent); 

Notiere die angular2 "Import" nicht zu haben braucht‘../node_modules/ 'vorangestellt, weil die Modulauflösung des TypeScript-Compilers den Modus "Knoten" verwendet. (Dokumente auf Node-Modul-Auflösung Logik: https://github.com/Microsoft/TypeScript/issues/2338) Hoffe, dass das für Sie arbeitet!