Visual Studio 2015 QuickStart

Some developers prefer Visual Studio as their Interactive Development Environment (IDE).

This cookbook describes the steps required to set up and use the Angular 2 QuickStart files in Visual Studio 2015 within an ASP.NET 4.x project.

ASP.NET 4.x Project

The steps for setting up the QuickStart files with an ASP.NET 4.x project in Visual Studio 2015 are as follows:

• Prerequisite: Install Node.js
• Step 1: Download the QuickStart files
• Step 2: Set up Visual Studio for TypeScript
• Step 3: Create the Visual Studio ASP.NET project
• Step 4: Copy the QuickStart files into the ASP.NET project folder
• Step 5: Restore required packages
• Step 6: Edit the TypeScript configuration file
• Step 7: Build and run the app

Prerequisite: Node.js

Install Node.js® and npm if they are not already on your machine.

Step 1: Download the QuickStart files

Download the QuickStart source from github. If you downloaded as a zip file, extract the files.

Step 2: Set up Visual Studio for TypeScript

Ensure you have the latest version of Visual Studio 2015 installed. Then open Visual Studio and install the latest set of TypeScript tools as follows:

• Open Tools | Extensions and Updates.
• Select Online in the tree on the left.
• Search for TypeScript using the search box in the upper right.
• Select the most current available TypeScript version.
• Download and install the package.

Step 3: Create the Visual Studio ASP.NET project

Create the ASP.NET 4.x project as follows:

• In Visual Studio, select File | New | Project from the menu.
• In the template tree, select Templates | Visual C# (or Visual Basic) | Web.
• Select the ASP.NET Web Application template, give the project a name, and click OK.
• Select the desired ASP.NET 4.5.2 template and click OK.

Step 4: Copy the QuickStart files into the ASP.NET project folder

Copy the QuickStart files we downloaded from github into the folder containing the .csproj file. Include the files in the Visual Studio project as follows:

• Click the Show All Files button in Solution Explorer to reveal all of the hidden files in the project.
• Right-click on each folder/file to be included in the project and select Include in Project. Minimally, include the following folder/files:
  • app folder (answer No if asked to search for TypeScript Typings)
  • styles.css
  • index.html
  • package.json
  • tsconfig.json
  • typings.json

Step 5: Restore the required packages

Restore the packages required for an Angular application as follows:

• Right-click on the package.json file in Solution Explorer and select Restore Packages.
  This uses npm to install all of the packages defined in the package.json file. It may take some time.
• If desired, open the Output window (View | Output) to watch the npm commands execute.
• Ignore the warnings.
• When the restore is finished, a message should say: npm command completed with exit code 0.
• Click the Refresh icon in Solution Explorer.
• Do not include the node_modules folder in the project. Let it be a hidden project project folder.

Step 6: Edit the TypeScript configuration file

For Visual Studio 2015 we must add "compileOnSave": true to the TypeScript configuration (tsconfig.json) file as shown here.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "compileOnSave": true
}

After making this change, exit Visual Studio and reopen it to reload the project.

Step 7: Build and run the app

Click the Run button or press F5 to build and run the application.

This launches the default browser and runs the QuickStart sample application.

Try editing any of the project files. Save and refresh the browser to see the changes.

c:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript.typescriptServices.js

Note on Routing Applications

If this application used the Angular router, a browser refresh could return a 404 - Page Not Found. Look at the address bar. Does it contain a navigation url (a "deep link")? We'll have to configure the server to return index.html for these requests. Until we do, remove the navigation path and refresh again.