You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Dec 4, 2017. It is now read-only.
Copy file name to clipboardExpand all lines: public/docs/ts/latest/cookbook/visual-studio-2015.jade
+68-62
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,17 @@ include ../_util-fns
6
6
7
7
This cookbook describes the steps required to set up and use the
8
8
Angular QuickStart files in Visual Studio 2015 within an ASP.NET 4.x project.
9
-
9
+
10
+
.l-sub-section
11
+
:marked
12
+
If you would prefer to have a `File | New Project` experience and are using ASP.NET Core with MVC,
13
+
then consider using the ASP.NET Core + Angular 2 template for Visual Studio 2015.
14
+
15
+
Be aware that the
16
+
resulting code does not map to the docs, so some adjustments are necessary to follow along with
17
+
the QuickStart or Tutorial.
18
+
For more information, check it out **[here](http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/)**:
19
+
10
20
.l-sub-section
11
21
:marked
12
22
There is no *live example* for this cookbook because it describes Visual Studio, not the application.
@@ -19,46 +29,77 @@ include ../_util-fns
19
29
Visual Studio 2015 are as follows:
20
30
21
31
:marked
22
-
- [Prerequisite](#prereq): Install Node.js
32
+
- [Prerequisite](#prereq1): Install Node.js
33
+
- [Prerequisite](#prereq2): Install Visual Studio 2015 Update 3
34
+
- [Prerequisite](#prereq3): Configure External Web tools
35
+
- [Prerequisite](#prereq4): Install TypeScript 2 for Visual Studio 2015
23
36
- [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
37
+
- [Step 2](#create-project): Create the Visual Studio ASP.NET project
38
+
- [Step 3](#copy): Copy the QuickStart files into the ASP.NET project folder
39
+
- [Step 4](#restore): Restore required packages
40
+
- [Step 5](#build-and-run): Build and run the app
30
41
31
42
.l-main-section
32
-
h2#prereq Prerequisite: Node.js
43
+
h2#prereq1 Prerequisite: Node.js
33
44
:marked
34
45
Install **[Node.js® and npm](https://nodejs.org/en/download/)**
35
46
if they are not already on your machine.
36
47
.l-sub-section
37
48
:marked
38
-
**Verify that you are running node version `4.4.x` - `5.x.x`, and npm `3.x.x`**
49
+
**Verify that you are running node version `4.6.x` or greater, and npm `3.x.x` or greater**
39
50
by running `node -v` and `npm -v` in a terminal/console window.
40
51
Older versions produce errors.
41
52
42
53
.l-main-section
43
-
h2#download Step 1: Download the QuickStart files
54
+
h2#prereq2 Prerequisite: Visual Studio 2015 Update 3
44
55
:marked
45
-
[Download the QuickStart source](https://github.com/angular/quickstart)
46
-
from github. If you downloaded as a zip file, extract the files.
56
+
The minimum requirement for developing Angular 2 applications with Visual Studio is Update 3.
57
+
Earlier versions do not follow the best practices for developing applications with TypeScript.
58
+
To view your version of Visual Studio 2015, go to `Help | About Visual Studio`.
59
+
60
+
If you don't have it, install **[Visual Studio 2015 Update 3](https://www.visualstudio.com/en-us/news/releasenotes/vs2015-update3-vs)**.
61
+
Or use `Tools | Extensions and Updates` to update to Update 3 directly from Visual Studio 2015.
47
62
48
63
.l-main-section
49
-
h2#setup-vs Step 2: Set up Visual Studio for TypeScript
64
+
h2#prereq3 Prerequisite: Configure External Web tools
50
65
: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:
66
+
The next prerequisite is to configure Visual Studio to use the global web tools instead of what ships with Visual Studio.
67
+
To configure the locations for the external Web tools:
68
+
69
+
* Use `Tools` | `Options` to open the Options dialog.
70
+
* In the tree on the left, select `Projects and Solutions` | `External Web Tools`.
71
+
* On the right, move the `$(PATH)` entry above the `$(DevEnvDir`) entries. This tells Visual Studio to
72
+
use the external tools (such as npm) found in the global path before using its own version of the external tools.
73
+
* Click OK to close the dialog.
74
+
* Restart Visual Studio for this change to take effect.
53
75
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.
76
+
Visual Studio will now look first for external tools in the current workspace and
77
+
if not found then look in the global path and if it is not found there, Visual Studio
78
+
will use its own versions of the tools.
59
79
60
80
.l-main-section
61
-
h2#create-project Step 3: Create the Visual Studio ASP.NET project
81
+
h2#prereq4 Prerequisite: Install TypeScript 2 for Visual Studio 2015
82
+
:marked
83
+
While Visual Studio Update 3 ships with TypeScript support out of the box, it currently doesn’t ship with TypeScript 2,
84
+
which is needed for developing Angular 2 applications.
85
+
86
+
To install TypeScript 2:
87
+
* Download and install **[TypeScript 2.0 for Visual Studio 2015](http://download.microsoft.com/download/6/D/8/6D8381B0-03C1-4BD2-AE65-30FF0A4C62DA/TS2.0.3-TS-release20-nightly-20160921.1/TypeScript_Dev14Full.exe)**
You can find out more about TypeScript 2 support in Visual studio **[here](https://blogs.msdn.microsoft.com/typescript/2016/09/22/announcing-typescript-2-0/)**
91
+
92
+
At this point, Visual Studio is ready. It’s a good idea to close Visual Studio at this point and
93
+
restart it to make sure everything is clean.
94
+
95
+
.l-main-section
96
+
h2#download Step 1: Download the QuickStart files
97
+
:marked
98
+
[Download the QuickStart source](https://github.com/angular/quickstart)
99
+
from github. If you downloaded as a zip file, extract the files.
100
+
101
+
.l-main-section
102
+
h2#create-project Step 2: Create the Visual Studio ASP.NET project
62
103
63
104
:marked
64
105
Create the ASP.NET 4.x project as follows:
@@ -74,7 +115,7 @@ h2#create-project Step 3: Create the Visual Studio ASP.NET project
74
115
no authentication and no hosting. Pick the template and options appropriate for your project.
75
116
76
117
.l-main-section
77
-
h2#copy Step 4: Copy the QuickStart files into the ASP.NET project folder
118
+
h2#copy Step 3: Copy the QuickStart files into the ASP.NET project folder
78
119
79
120
:marked
80
121
Copy the QuickStart files we downloaded from github into the folder containing the `.csproj` file.
@@ -90,7 +131,7 @@ h2#copy Step 4: Copy the QuickStart files into the ASP.NET project folder
90
131
* tsconfig.json
91
132
92
133
.l-main-section
93
-
h2#restore Step 5: Restore the required packages
134
+
h2#restore Step 4: Restore the required packages
94
135
:marked
95
136
Restore the packages required for an Angular application as follows:
0 commit comments