Getting Started with Angular 2 & ASP.NET 4.x

This is a very quick and dirty guide to getting started with Angular 2 and ASP.NET 4.x (unlike many where author explains in detail what Angular 2, Typescript, ASP.NET and blah, blah is). So in short I assume the reader knows what are those things. This post or story in medium terminology is kind of notes/diary for my future self.

Here it goes roughly base on Angular’s Visual Studio 2015 QuickStart.

One Time Setup

  • Visual Studio 2015 (Community Edition would work just fine)
  • Node.js — should be install with Visual Studio 2015
  • Setup Visual Studio for TypeScript

Per Project

  • Step 1: Download QuickStart files
  • Step 2: Create ASP.NET Web Application
  • Step 3: Copy QuickStart files into ASP.NET project folder
  • Step 4: Restore required packages
  • Step 5: Edit TypeScript configuration file
  • Step 6: Build and run the app
  • Step 7: Start adding your functionality

Step 1: Download QuickStart files

Download QuickStart source from github. This step is optional but I would highly recommend doing it as the package.json file will have latest angular setup for you. If the above link does not work then get it following the link from Step 1: Download the QuickStart files.

Step 2: Create ASP.NET Web Application

Create ASP.NET Web Application Project based on ASP.NET 4.x template. Choose from Empty, MVC or WebAPI depending upon what you intend to do after setting up Angular.

Step 3: Copy QuickStart files into ASP.NET project folder

Copy QuickStart files downloaded in Step 1 into the folder containing .csproj file. Include the files in Visual Studio project. It is the same list as in Visual Studio 2015 QuickStart cookbook Step 4 with 1 addition, typings.json would not be needed as if you are intending to use @types.

  • app folder (answer No if asked to search for TypeScript Typings)
  • styles.css
  • index.html
  • package.json
  • tsconfig.json
  • systemjs.config.js (addition)

Step 4: Restore required packages

Right click on package.json file in Solution Explorer and select Restore Packages.

Step 5: Edit TypeScript configuration file

For Visual Studio 2015 we mush add “compileOnSave” to TypeScript configuration (tsconfig.json). Add following under root json object if not already present.

"compileOnSave": true

You might have to restart Visual Studio after making the above change.

Step 6: Build and run the app

Set index.html as start page. Click the Run button or press F5 to build and run the application.

You should be able to see “Loading…” and then “My First Angular App” on web page.

Step 7: Start adding your functionality

Angular 2 is setup in ASP.NET 4.x Web Application, now you can start adding your functionality.