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

Commit e7f3fc6

Browse files
DeborahKwardbell
DeborahK
authored and
wardbell
committed
docs(cb-vs2015) new cookbook for Visual Studio 2015 QuickStart
closes #1502
1 parent c4e87d9 commit e7f3fc6

File tree

8 files changed

+193
-0
lines changed

8 files changed

+193
-0
lines changed

‎public/docs/_examples/cb-visual-studio-2015/ts/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
!tsconfig.json

‎public/docs/_examples/cb-visual-studio-2015/ts/tsconfig.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"module": "commonjs",
5+
"moduleResolution": "node",
6+
"sourceMap": true,
7+
"emitDecoratorMetadata": true,
8+
"experimentalDecorators": true,
9+
"removeComments": false,
10+
"noImplicitAny": true,
11+
"suppressImplicitAnyIndexErrors": true
12+
},
13+
"compileOnSave": true
14+
}

‎public/docs/dart/latest/cookbook/_data.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,5 +44,11 @@
4444
"title": "TypeScript to JavaScript",
4545
"intro": "Convert Angular 2 TypeScript examples into ES5 JavaScript",
4646
"hide": true
47+
},
48+
49+
"visual-studio-2015": {
50+
"title": "Visual Studio 2015 QuickStart",
51+
"intro": "Use Visual Studio 2015 with the QuickStart files",
52+
"hide": true
4753
}
4854
}

‎public/docs/dart/latest/cookbook/visual-studio-2015.jade

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
!= partial("../../../_includes/_ts-temp")

‎public/docs/js/latest/cookbook/_data.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,11 @@
3939
"ts-to-js": {
4040
"title": "TypeScript to JavaScript",
4141
"intro": "Convert Angular 2 TypeScript examples into ES5 JavaScript"
42+
},
43+
44+
"visual-studio-2015": {
45+
"title": "Visual Studio 2015 QuickStart",
46+
"intro": "Use Visual Studio 2015 with the QuickStart files"
4247
}
4348

4449
}

‎public/docs/js/latest/cookbook/visual-studio-2015.jade

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
!= partial("../../../_includes/_ts-temp")

‎public/docs/ts/latest/cookbook/_data.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,5 +39,10 @@
3939
"ts-to-js": {
4040
"title": "TypeScript to JavaScript",
4141
"intro": "Convert Angular 2 TypeScript examples into ES5 JavaScript"
42+
},
43+
44+
"visual-studio-2015": {
45+
"title": "Visual Studio 2015 QuickStart",
46+
"intro": "Use Visual Studio 2015 with the QuickStart files"
4247
}
4348
}

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

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
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

Comments
 (0)