I have angular2 working with Visual Studio 2015. I had to install .NET 5 RC1 to support tsconfig.json. They have a completely new project structure which I like very much. Here is my setup:
You'll notice that I put my app folder and ts files inside my wwwroot - that's just my preference, and it's following the angular2 quickstart. I copied the bundled files from my node modules into my scripts folder inside my wwwroot.
I created a package.json based on the 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"
}
}
Then I right-clicked on the package.json and selected "Restore Packages" and it ran the NPM install to create the node_modules folder with all the packages you see. Then I setup my tsconfig.json like so and put it in the root:
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
This is key to making it work. I actually had to reload the solution for it to see the tsconfig.json and start using it. In addition to this, I went into my Tools > Options and set the typescript options like so:
Next I added my index.html file:
<!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>
The order of your script includes is important! Here's my MyApp.ts file:
import { Component } from "angular2/core";
@Component({
selector: "my-app",
template: `
<div>Hello from Angular 2</div>
`
})
export class MyApp {
public constructor() {
}
}
and my boot.ts file:
import { bootstrap } from "angular2/platform/browser";
import { MyApp } from "./MyApp";
bootstrap(MyApp);
At this point I felt I was ready to run it, so I launched it and navigated to my /index.html - but all I saw was "Hello World!". It seemed to be ignoring my path to serve index.html and was statically writing out text. Looking at the Startup.cs, I found the problem.:
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);
}
}
By commenting out the app.Run and adding the app.UseStaticFiles(); (which required installing an additional package), I was ready to try again:
Success!
