include ../_util-fns

<a id="top"></a>
:marked
   Some developers prefer Visual Studio as their Interactive Development Environment (IDE).

   有些开发者喜欢用Visual Studio。

   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.

   本烹饪宝典介绍了在Visual Studio 2015的ASP.NET 4.x项目中，用Angular 2实现“快速起步”所需的步骤。
     
.l-sub-section
  :marked
    There is no *live example* for this cookbook because it describes Visual Studio, not the application.

    本烹饪宝典中没有*在线例子*，因为它介绍的是Visual Studio，而不是应用程序。

.l-main-section
<a id="asp-net-4"></a>
:marked
  ## ASP.NET 4.x Project

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

  在Visual Studio的ASP.NET 4.x项目中实现“快速起步”的步骤如下：
  
:marked
  - [Prerequisite](#prereq): Install Node.js

  - [前提条件](#prereq): 安装Node.js

  - [Step 1](#download): Download the QuickStart files

  - [第一步](#download): 下载“快速起步”的文件

  - [Step 2](#setup-vs): Set up Visual Studio for TypeScript

  - [第二步](#setup-vs): 设置Visual Studio，以支持TypeScript

  - [Step 3](#create-project): Create the Visual Studio ASP.NET project

  - [第三步](#create-project): 创建Visual Studio ASP.NET项目

  - [Step 4](#copy): Copy the QuickStart files into the ASP.NET project folder

  - [第四步](#copy): 把“快速起步”中的文件拷贝到ASP.NET的项目目录中

  - [Step 5](#restore): Restore required packages
  
  - [第五步](#restore): 恢复需要的包

  - [Step 6](#edit-config): Edit the TypeScript configuration file

  - [第六步](#edit-config): 编辑TypeScript配置文件

  - [Step 7](#build-and-run): Build and run the app

  - [第七步](#build-and-run): 构建和运行应用程序
  
.l-main-section
h2#prereq Prerequisite: Node.js

h2#prereq 前提条件: Node.js

:marked
  Install **[Node.js® and npm](https://nodejs.org/en/download/)**
  if they are not already on your machine.

  如果你的电脑里没有Node.js®和npm，请安装**[它们](https://nodejs.org/en/download/)**。

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

    在终端或者控制台中运行`node -v`和`npm -v`，**请确认你的Node版本为`4.4.x` - `5.x.x`，npm的版本为`3.x.x`**。老版本会引起错误。

.l-main-section
h2#download Step 1: Download the QuickStart files

h2#download 第一步: 现在“快速起步”文件

:marked
  [Download the QuickStart source](https://github.com/angular/quickstart)
  from github. If you downloaded as a zip file, extract the files.

  从github[下载“快速起步”的源代码](https://github.com/angular/quickstart)。如果下载的是一个压缩的zip文件，解压它。

.l-main-section
h2#setup-vs Step 2: Set up Visual Studio for TypeScript

h2#setup-vs 第二步：设置Visual Studio，以支持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:

  确保你的Visual Studio 2015是最新版本，然后打开Visual Studio并安装最新的TypeScript工具：

  * Open `Tools` | `Extensions and Updates`.

  * 打开`Tools` | `Extensions and Updates`。

  * Select `Online` in the tree on the left.

  * 在左侧目录树中选择`Online`。

  * Search for `TypeScript` using the search box in the upper right.

  * 在右上角的搜索框中搜`TypeScript`。

  * Select the most current available TypeScript version.

  * 选择最新版本的TypeScript。

  * Download and install the package.
  
  * 下载并安装依赖包。

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

h2#create-project 第三步: 创建Visual Studio ASP.NET项目

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

  按照下面的步骤创建ASP.NET 4.x项目:
  
  * In Visual Studio, select `File` | `New` | `Project` from the menu.
  
  * 在Visual Studio中，选择`File` | `New` | `Project`菜单。

  * In the template tree, select `Templates` | `Visual C#` (or `Visual Basic`) | `Web`.

  * 在模板树中，选择`Templates` | `Visual C#`(或`Visual Basic`) | `Web`菜单。

  * Select the `ASP.NET Web Application` template, give the project a name, and click OK.

  * 选择`ASP.NET Web Application`模板，输入项目名，点击“OK”按钮。

  * Select the desired ASP.NET 4.5.2 template and click OK.

  * 选择自己喜欢的ASP.NET 4.5.2模板，点击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.

    本烹饪宝典选择了`Empty`模板，它没有添加过任何目录，没有身份验证，没有服务器托管。为你的项目选择合适的模板和选项。
    
.l-main-section
h2#copy Step 4: Copy the QuickStart files into the ASP.NET project folder

h2#copy 第四步: 拷贝“快速起步”的文件到ASP.NET项目所在的目录

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

  拷贝从github下载的“快速起步”文件到包含`.csproj`文件的目录中。按照下面的步骤把它们加到Visual Studio中：
  
  * Click the `Show All Files` button in Solution Explorer to reveal all of the hidden files in the project.

  * 在Solution Explorer中点击`Show All Files`按钮，显示项目中所有隐藏文件。

  * Right-click on each folder/file to be included in the project and select `Include in Project`.
    Minimally, include the following folder/files:

  * 右键点击每个目录和文件，选择`Include in Project`。
    最少要添加下列文件：
    
    * app folder (answer *No*  if asked to search for TypeScript Typings)    

    * app目录（如果询问是否要搜索TypeScript类型，回答*No*）

    * styles.css

    * styles.css

    * index.html

    * index.html

    * package.json

    * package.json

    * tsconfig.json

    * tsconfig.json

    * typings.json

    * typings.json
    
.l-main-section
h2#restore Step 5: Restore the required packages

h2#restore 第五步: 恢复需要的包

:marked
  Restore the packages required for an Angular application as follows:
  
  按下面的步骤恢复Angular应用程序需要的包：
  
  * 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.

  * 在Solution Explorer中右键点击`package.json`，选择`Restore Packages`。
    <br>这样，Visual Studio会使用`npm`来安装在`package.json`中定义的所有包. 
    这可能需要花一点时间。

  * If desired, open the Output window (`View` | `Output`) to watch the npm commands execute.

  * 如果愿意，打开Output窗口(`View` | `Output`)来监控npm命令的执行情况。
  
  * Ignore the warnings.

  * 忽略所有警告。

  * When the restore is finished, a message should say: `npm command completed with exit code 0`.

  * 当恢复完成后，将会出现一条消息：`npm command completed with exit code 0`.

  * Click the `Refresh` icon in Solution Explorer.

  * 在Solution Explorer里，点击`Refresh`图标。

  * **Do not** include the `node_modules` folder in the project. Let it be a hidden project project folder.

  * **不要**将`node_modules`目录添加到项目中，让它隐藏。

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

    "*@angular/compiler is not in the npm registry*"这个错误表明Visual Studio 2015使用了老版本的npm。按照下面的步骤安装最新版本的npm：
    
    * `Tools` | `Options` to open the Options dialog.
    
    * `Tools` | `Options`来打开“选项”对话框。
    
    * In the tree on the left, select `Projects and Solutions` | `External Web Tools`.

    * 在左侧的树状目录中，选择`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.

    * 在右侧，把`$(PATH)`项移动到`$(DevEnvDir`)上面，这样就会告诉Visual Studio优先在你的路径中查找外来工具（比如npm）。
    
    * Click OK to close the dialog.

    * 点击OK，关闭对话框。
    
    * Restart Visual Studio for this change to take effect.

    * 重新启动Visual Studio来让这些修改生效。
      
.l-main-section
h2#edit-config Step 6: Edit the TypeScript configuration file

h2#edit-config 第六步：编辑TypeScript配置文件

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

  在Visual Studio 2015里，我们必须在TypeScript的配置文件(`tsconfig.json`)中添加`"compileOnSave": true`： 
  
+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.  

  修改上面的设置后，**退出**Visual Studio，再打开它并加载项目。  

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

h2#build-and-run 第七步：编译和运行应用程序

:marked
  Click the Run button or press F5 to build and run the application.
  
  点击“运行”按钮或按F5键来编译和运行应用程序。

  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).

    像“*Property ‘map’ does not exist on type ‘Observable<Response>’*”和“*Observable cannot be found*”这样的编译错误
    说明Visual Studio的版本太老了。退出Visual Studio，按照[这里的指南](https://github.com/Microsoft/TypeScript/issues/8518)升级Visual Studio。

    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

h2#routing 应用程序的路由

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

  如果这个应用程序使用了Angular路由器，刷新浏览器时可能会返回一个*404 - Page Not Found*。查看一下地址栏，它是否包含一个导航url（“深链接”）？
  我们必须配置服务器，让它为这些请求直接返回`index.html`的内容。在配置完之前，请暂时删除导航路径，回到首页，再进行刷新。

