angular-cn/public/docs/ts/latest/cookbook/visual-studio-2015.jade

include ../_util-fns

<a id="top"></a>
:marked
   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.
     
.l-sub-section
  :marked
    There is no *live example* for this cookbook because it describes Visual Studio, not the application.
.l-main-section
<a id="asp-net-4"></a>
:marked
  ## 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:
  
:marked
  - [Prerequisite](#prereq): Install Node.js
  - [Step 1](#download): Download the QuickStart files
  - [Step 2](#setup-vs): Set up Visual Studio for TypeScript
  - [Step 3](#create-project): Create the Visual Studio ASP.NET project
  - [Step 4](#copy): Copy the QuickStart files into the ASP.NET project folder
  - [Step 5](#restore): Restore required packages
  - [Step 6](#edit-config): Edit the TypeScript configuration file
  - [Step 7](#build-and-run): Build and run the app
  
.l-main-section
h2#prereq Prerequisite: Node.js
:marked
  Install **[Node.js® and npm](https://nodejs.org/en/download/)**
  if they are not already on your machine.
.l-sub-section
  :marked
    **Verify that you are running node version `4.4.x` - `5.x.x`, and npm `3.x.x`**
    by running `node -v` and `npm -v` in a terminal/console window.
    Older versions produce errors.

.l-main-section
h2#download Step 1: Download the QuickStart files
:marked
  [Download the QuickStart source](https://github.com/angular/quickstart)
  from github. If you downloaded as a zip file, extract the files.

.l-main-section
h2#setup-vs Step 2: Set up Visual Studio for TypeScript
:marked
  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.

.l-main-section
h2#create-project Step 3: Create the Visual Studio ASP.NET project

:marked
  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.

.l-sub-section
  :marked
    In this cookbook we'll select the `Empty` template with no added folders, 
    no authentication and no hosting. Pick the template and options appropriate for your project.
    
.l-main-section
h2#copy Step 4: Copy the QuickStart files into the ASP.NET project folder

:marked
  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
    
.l-main-section
h2#restore Step 5: Restore the required packages
:marked
  Restore the packages required for an Angular application as follows:
  
  * Right-click on the `package.json` file in Solution Explorer and select `Restore Packages`.
    <br>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.
.alert.is-important
  :marked
    An error such as "*@angular/compiler is not in the npm registry*" suggests that Visual Studio 2015
    is using an older version of npm. Update to the latest installed version of npm:
    
    * `Tools` | `Options` to open the Options dialog.
    * In the tree on the left, select `Projects and Solutions` | `External Web Tools`.
    * On the right, move the `$(PATH)` entry above the `$(DevEnvDir`) entries. This tells Visual Studio to
      use the external tools (such as npm) found in your path before using its own version of the external tools.
    * Click OK to close the dialog.
    * Restart Visual Studio for this change to take effect.
      
.l-main-section
h2#edit-config Step 6: Edit the TypeScript configuration file
:marked
  For Visual Studio 2015 we must add `"compileOnSave": true` to the TypeScript configuration (`tsconfig.json`) file 
  as shown here. 
  
+makeJson('cb-visual-studio-2015/ts/tsconfig.json', null, 'tsconfig.json (scripts)')

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

.l-main-section
h2#build-and-run Step 7: Build and run the app

:marked
  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. 
  
.alert.is-important
  :marked
    Compiler errors such as "*Property ‘map’ does not exist on type ‘Observable<Response>’*" and
    "*Observable cannot be found*" indicate an old release of Visual Studio.
    Exit Visual Studio and follow the [instructions here](https://github.com/Microsoft/TypeScript/issues/8518).

    You'll be asked to replace the file
  code-example.
    c:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript.typescriptServices.js

  :marked
    This operation requires admin privileges.

.l-main-section
h2#routing Note on Routing Applications
:marked
  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.