Ich habe angular2 mit Visual Studio 2015 arbeiten. Ich musste .NET 5 RC1 installieren, um tsconfig.json zu unterstützen. Sie haben eine völlig neue Projektstruktur, die mir sehr gefällt. Hier ist mein Setup:
Sie werden bemerken, dass ich meine App-Ordner abgelegt und ts-Dateien in meinem wwwroot - das ist nur meine Präferenz, und es ist nach dem angular2 quickstart. Ich habe die gebündelten Dateien von meinen Knotenmodulen in meinen Skriptenordner in meinem wwwroot kopiert.
habe ich eine package.json basierend auf dem angular2 beta quickstart:
{
"name": "angular2-quickstart",
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
}
}
Dann habe ich auf dem package.json und ausgewählte „Restore Packages“ rechts geklickt und es lief installieren das NPM die node_modules erstellen Ordner mit allen Paketen, die Sie sehen. Dann richte ich mein tsconfig.json wie folgt ein und setze es in das Wurzelverzeichnis:
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
Dies ist der Schlüssel zum Funktionieren. Ich musste die Lösung tatsächlich neu laden, um die tsconfig.json zu sehen und anzufangen, sie zu benutzen. Zusätzlich zu diesem, ging ich in mein Extras> Optionen und die Typoskript Optionen wie folgt: 
Weiter habe ich meine Datei index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sample Angular 2 App</title>
</head>
<body>
<my-app>Loading...</my-app>
<script src="scripts/angular2-polyfills.js"></script>
<script src="scripts/system.src.js"></script>
<script src="scripts/Rx.js"></script>
<script src="scripts/angular2.dev.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot').then(null, console.error.bind(console));
</script>
</body>
</html>
Die Reihenfolge des Skripts enthält, ist wichtig ! Hier ist meine MyApp.ts Datei:
import { Component } from "angular2/core";
@Component({
selector: "my-app",
template: `
<div>Hello from Angular 2</div>
`
})
export class MyApp {
public constructor() {
}
}
und meine boot.ts Datei:
import { bootstrap } from "angular2/platform/browser";
import { MyApp } from "./MyApp";
bootstrap(MyApp);
An diesem Punkt fühlte ich war bereit, es zu laufen, so dass ich startete es und navigiert zu meinem/index .html - aber alles, was ich sah, war "Hallo Welt!". Es schien meinen Weg zu ignorieren, index.html zu bedienen und schrieb statisch Text. Mit Blick auf die Startup.cs habe ich das Problem gefunden.:
namespace Angular2Demo
{
public class Startup
{
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app)
{
app.UseIISPlatformHandler();
// Add this!
app.UseStaticFiles();
// Remove this!
//app.Run(async (context) =>
//{
// await context.Response.WriteAsync("Hello World!");
//});
}
// Entry point for the application.
public static void Main(string[] args) => WebApplication.Run<Startup>(args);
}
}
Durch die app.Run kommentieren und Hinzufügen der app.UseStaticFiles(); (die ein zusätzliches Paket erforderlich Installation), war ich bereit, wieder zu versuchen:
Erfolg!
Ich habe Probleme mit ihr auf meine Frage für VS 2013: http://Stackoverflow.com/questions/34366928/how-can-i-setup-my-vs-2013-typescript-project-to- compile-my-typescript-files-but Ich erinnere mich, dass ich selbst auf dieses Problem gestoßen bin, als ich in Intellij damit gearbeitet habe. Die Lösung hat sich selbst gelöst, als ich TS 1.6 und Exclude in meiner tsconfig.json verwendet habe. – Zach
Ich benutze 1.7.3 und das Problem ist nicht mit Node-Modulen, es ist mit dem TS, die ich geschrieben habe (aus dem Tutorial angualr2). Ich glaube nicht, dass ich das ausschließen muss, es muss kompiliert werden. –
yeah, ich habe auch versucht, um die eckige 2 mit Visual Studio zu arbeiten, aber nach seltsamen Verhalten und mehrere "boolesche sh * t" Fehler und 8 Stunden zu lösen versuche ich nur Verschiebung-löschte mein Projekt ... –