Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 9f6db30

Browse files
authored
docs(vs2015): update for current tools.
1 parent cfa7ec7 commit 9f6db30

File tree

1 file changed

+68
-62
lines changed

1 file changed

+68
-62
lines changed

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

+68-62
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,17 @@ include ../_util-fns
66

77
This cookbook describes the steps required to set up and use the
88
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+
1020
.l-sub-section
1121
:marked
1222
There is no *live example* for this cookbook because it describes Visual Studio, not the application.
@@ -19,46 +29,77 @@ include ../_util-fns
1929
Visual Studio 2015 are as follows:
2030

2131
: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
2336
- [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
3041

3142
.l-main-section
32-
h2#prereq Prerequisite: Node.js
43+
h2#prereq1 Prerequisite: Node.js
3344
:marked
3445
Install **[Node.js® and npm](https://nodejs.org/en/download/)**
3546
if they are not already on your machine.
3647
.l-sub-section
3748
: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**
3950
by running `node -v` and `npm -v` in a terminal/console window.
4051
Older versions produce errors.
4152

4253
.l-main-section
43-
h2#download Step 1: Download the QuickStart files
54+
h2#prereq2 Prerequisite: Visual Studio 2015 Update 3
4455
: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.
4762

4863
.l-main-section
49-
h2#setup-vs Step 2: Set up Visual Studio for TypeScript
64+
h2#prereq3 Prerequisite: Configure External Web tools
5065
: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.
5375

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

6080
.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)**
88+
* OR install it with npm: `npm install -g [email protected]`.
89+
90+
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
62103

63104
:marked
64105
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
74115
no authentication and no hosting. Pick the template and options appropriate for your project.
75116

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

79120
:marked
80121
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
90131
* tsconfig.json
91132

92133
.l-main-section
93-
h2#restore Step 5: Restore the required packages
134+
h2#restore Step 4: Restore the required packages
94135
:marked
95136
Restore the packages required for an Angular application as follows:
96137

@@ -102,34 +143,13 @@ h2#restore Step 5: Restore the required packages
102143
* When the restore is finished, a message should say: `npm command completed with exit code 0`.
103144
* Click the `Refresh` icon in Solution Explorer.
104145
* **Do not** include the `node_modules` folder in the project. Let it be a hidden project folder.
105-
.alert.is-important
106-
:marked
107-
An error such as "*@angular/compiler is not in the npm registry*" suggests that Visual Studio 2015
108-
is using an older version of npm. Update to the latest installed version of npm:
109-
110-
* `Tools` | `Options` to open the Options dialog.
111-
* In the tree on the left, select `Projects and Solutions` | `External Web Tools`.
112-
* On the right, move the `$(PATH)` entry above the `$(DevEnvDir`) entries. This tells Visual Studio to
113-
use the external tools (such as npm) found in your path before using its own version of the external tools.
114-
* Click OK to close the dialog.
115-
* Restart Visual Studio for this change to take effect.
116-
117-
.l-main-section
118-
h2#edit-config Step 6: Edit the TypeScript configuration file
119-
:marked
120-
For Visual Studio 2015 we must add `"compileOnSave": true` to the TypeScript configuration (`tsconfig.json`) file
121-
as shown here.
122-
123-
+makeJson('cb-visual-studio-2015/ts/tsconfig.json', null, 'tsconfig.json (scripts)')
124-
125-
:marked
126-
After making this change, **exit** Visual Studio and reopen it to reload the project.
127146

128147
.l-main-section
129-
h2#build-and-run Step 7: Build and run the app
148+
h2#build-and-run Step 5: Build and run the app
130149

131150
:marked
132-
To set index.html as start page, right-click `index.html` in Solution Explorer and select option `Set As Start Page`.
151+
First, ensure that `index.html` is set as the start page.
152+
To set `index.html` as start page, right-click `index.html` in Solution Explorer and select option `Set As Start Page`.
133153

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

@@ -138,24 +158,10 @@ h2#build-and-run Step 7: Build and run the app
138158
Try editing any of the project files. *Save* and refresh the browser to
139159
see the changes.
140160

141-
.alert.is-important
142-
:marked
143-
Compiler errors such as "*Property `map` does not exist on type `Observable<Response>`*" and
144-
"*Observable cannot be found*" indicate an old release of Visual Studio.
145-
Exit Visual Studio and follow the [instructions here](https://github.com/Microsoft/TypeScript/issues/8518).
146-
147-
You'll be asked to replace the file
148-
code-example.
149-
c:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript.typescriptServices.js
150-
151-
:marked
152-
This operation requires admin privileges.
153-
154161
.l-main-section
155162
h2#routing Note on Routing Applications
156163
:marked
157164
If this application used the Angular router, a browser refresh could return a *404 - Page Not Found*.
158165
Look at the address bar. Does it contain a navigation url (a "deep link")?
159166
We'll have to configure the server to return `index.html` for these requests.
160167
Until we do, remove the navigation path and refresh again.
161-

0 commit comments

Comments
 (0)