|
| 1 | +include ../_util-fns |
| 2 | + |
| 3 | +<a id="top"></a> |
| 4 | +:marked |
| 5 | + Some developers prefer Visual Studio as their Interactive Development Environment (IDE). |
| 6 | + |
| 7 | + This cookbook describes the steps required to set up and use the |
| 8 | + Angular 2 QuickStart files in Visual Studio 2015 within an ASP.NET 4.x project. |
| 9 | + |
| 10 | +.l-sub-section |
| 11 | + :marked |
| 12 | + There is no *live example* for this cookbook because it describes Visual Studio, not the application. |
| 13 | +.l-main-section |
| 14 | +<a id="asp-net-4"></a> |
| 15 | +:marked |
| 16 | + ## ASP.NET 4.x Project |
| 17 | + |
| 18 | + The steps for setting up the QuickStart files with an ASP.NET 4.x project in |
| 19 | + Visual Studio 2015 are as follows: |
| 20 | + |
| 21 | +:marked |
| 22 | + - [Prerequisite](#prereq): Install Node.js |
| 23 | + - [Step 1](#download): Download the QuickStart files |
| 24 | + - [Step 2](#setup-vs): Set up Visual Studio for TypeScript |
| 25 | + - [Step 3](#create-project): Create the Visual Studio ASP.NET project |
| 26 | + - [Step 4](#copy): Copy the QuickStart files into the ASP.NET project folder |
| 27 | + - [Step 5](#restore): Restore required packages |
| 28 | + - [Step 6](#edit-config): Edit the TypeScript configuration file |
| 29 | + - [Step 7](#build-and-run): Build and run the app |
| 30 | + |
| 31 | +.l-main-section |
| 32 | +h2#prereq Prerequisite: Node.js |
| 33 | +:marked |
| 34 | + Install **[Node.js® and npm](https://nodejs.org/en/download/)** |
| 35 | + if they are not already on your machine. |
| 36 | +.l-sub-section |
| 37 | + :marked |
| 38 | + **Verify that you are running node version `4.4.x` - `5.x.x`, and npm `3.x.x`** |
| 39 | + by running `node -v` and `npm -v` in a terminal/console window. |
| 40 | + Older versions produce errors. |
| 41 | + |
| 42 | +.l-main-section |
| 43 | +h2#download Step 1: Download the QuickStart files |
| 44 | +:marked |
| 45 | + [Download the QuickStart source](https://github.com/angular/quickstart) |
| 46 | + from github. If you downloaded as a zip file, extract the files. |
| 47 | + |
| 48 | +.l-main-section |
| 49 | +h2#setup-vs Step 2: Set up Visual Studio for TypeScript |
| 50 | +:marked |
| 51 | + Ensure you have the latest version of Visual Studio 2015 installed. |
| 52 | + Then open Visual Studio and install the latest set of TypeScript tools as follows: |
| 53 | + |
| 54 | + * Open `Tools` | `Extensions and Updates`. |
| 55 | + * Select `Online` in the tree on the left. |
| 56 | + * Search for `TypeScript` using the search box in the upper right. |
| 57 | + * Select the most current available TypeScript version. |
| 58 | + * Download and install the package. |
| 59 | + |
| 60 | +.l-main-section |
| 61 | +h2#create-project Step 3: Create the Visual Studio ASP.NET project |
| 62 | + |
| 63 | +:marked |
| 64 | + Create the ASP.NET 4.x project as follows: |
| 65 | + |
| 66 | + * In Visual Studio, select `File` | `New` | `Project` from the menu. |
| 67 | + * In the template tree, select `Templates` | `Visual C#` (or `Visual Basic`) | `Web`. |
| 68 | + * Select the `ASP.NET Web Application` template, give the project a name, and click OK. |
| 69 | + * Select the desired ASP.NET 4.5.2 template and click OK. |
| 70 | + |
| 71 | +.l-sub-section |
| 72 | + :marked |
| 73 | + In this cookbook we'll select the `Empty` template with no added folders, |
| 74 | + no authentication and no hosting. Pick the template and options appropriate for your project. |
| 75 | + |
| 76 | +.l-main-section |
| 77 | +h2#copy Step 4: Copy the QuickStart files into the ASP.NET project folder |
| 78 | + |
| 79 | +:marked |
| 80 | + Copy the QuickStart files we downloaded from github into the folder containing the `.csproj` file. |
| 81 | + Include the files in the Visual Studio project as follows: |
| 82 | + |
| 83 | + * Click the `Show All Files` button in Solution Explorer to reveal all of the hidden files in the project. |
| 84 | + * Right-click on each folder/file to be included in the project and select `Include in Project`. |
| 85 | + Minimally, include the following folder/files: |
| 86 | + * app folder (answer *No* if asked to search for TypeScript Typings) |
| 87 | + * styles.css |
| 88 | + * index.html |
| 89 | + * package.json |
| 90 | + * tsconfig.json |
| 91 | + * typings.json |
| 92 | + |
| 93 | +.l-main-section |
| 94 | +h2#restore Step 5: Restore the required packages |
| 95 | +:marked |
| 96 | + Restore the packages required for an Angular application as follows: |
| 97 | + |
| 98 | + * Right-click on the `package.json` file in Solution Explorer and select `Restore Packages`. |
| 99 | + <br>This uses `npm` to install all of the packages defined in the `package.json` file. |
| 100 | + It may take some time. |
| 101 | + * If desired, open the Output window (`View` | `Output`) to watch the npm commands execute. |
| 102 | + * Ignore the warnings. |
| 103 | + * When the restore is finished, a message should say: `npm command completed with exit code 0`. |
| 104 | + * Click the `Refresh` icon in Solution Explorer. |
| 105 | + * **Do not** include the `node_modules` folder in the project. Let it be a hidden project project folder. |
| 106 | +.alert.is-important |
| 107 | + :marked |
| 108 | + An error such as "*@angular/compiler is not in the npm registry*" suggests that Visual Studio 2015 |
| 109 | + is using an older version of npm. Update to the latest installed version of npm: |
| 110 | + |
| 111 | + * `Tools` | `Options` to open the Options dialog. |
| 112 | + * In the tree on the left, select `Projects and Solutions` | `External Web Tools`. |
| 113 | + * On the right, move the `$(PATH)` entry above the `$(DevEnvDir`) entries. This tells Visual Studio to |
| 114 | + use the external tools (such as npm) found in your path before using its own version of the external tools. |
| 115 | + * Click OK to close the dialog. |
| 116 | + * Restart Visual Studio for this change to take effect. |
| 117 | + |
| 118 | +.l-main-section |
| 119 | +h2#edit-config Step 6: Edit the TypeScript configuration file |
| 120 | +:marked |
| 121 | + For Visual Studio 2015 we must add `"compileOnSave": true` to the TypeScript configuration (`tsconfig.json`) file |
| 122 | + as shown here. |
| 123 | + |
| 124 | ++makeJson('cb-visual-studio-2015/ts/tsconfig.json', null, 'tsconfig.json (scripts)') |
| 125 | + |
| 126 | +:marked |
| 127 | + After making this change, **exit** Visual Studio and reopen it to reload the project. |
| 128 | + |
| 129 | +.l-main-section |
| 130 | +h2#build-and-run Step 7: Build and run the app |
| 131 | + |
| 132 | +:marked |
| 133 | + Click the Run button or press F5 to build and run the application. |
| 134 | + |
| 135 | + This launches the default browser and runs the QuickStart sample application. |
| 136 | + |
| 137 | + Try editing any of the project files. *Save* and refresh the browser to |
| 138 | + see the changes. |
| 139 | + |
| 140 | +.alert.is-important |
| 141 | + :marked |
| 142 | + Compiler errors such as "*Property ‘map’ does not exist on type ‘Observable<Response>’*" and |
| 143 | + "*Observable cannot be found*" indicate an old release of Visual Studio. |
| 144 | + Exit Visual Studio and follow the [instructions here](https://github.com/Microsoft/TypeScript/issues/8518). |
| 145 | + |
| 146 | + You'll be asked to replace the file |
| 147 | + code-example. |
| 148 | + c:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript.typescriptServices.js |
| 149 | + |
| 150 | + :marked |
| 151 | + This operation requires admin privileges. |
| 152 | + |
| 153 | +.l-main-section |
| 154 | +h2#routing Note on Routing Applications |
| 155 | +:marked |
| 156 | + If this application used the Angular router, a browser refresh could return a *404 - Page Not Found*. |
| 157 | + Look at the address bar. Does it contain a navigation url (a "deep link")? |
| 158 | + We'll have to configure the server to return `index.html` for these requests. |
| 159 | + Until we do, remove the navigation path and refresh again. |
| 160 | + |
0 commit comments