Some developers prefer Visual Studio as their Integrated Development Environment (IDE).
This cookbook describes the steps required to set up and use the Angular QuickStart files in Visual Studio 2015 within an ASP.NET 4.x project.
There is no live example for this cookbook because it describes Visual Studio, not the application.
This cookbook explains how to set up the QuickStart files with an ASP.NET 4.x project in Visual Studio 2015.
If you prefer a File | New Project
experience and are using ASP.NET Core, then consider the experimental ASP.NET Core + Angular template for Visual Studio 2015. Note that the resulting code does not map to the docs. Adjust accordingly.
The steps are as follows:
Install Node.js® and npm if they are not already on your machine.
Verify that you are running node version 4.6.x
or greater, and npm 3.x.x
or greater by running node -v
and npm -v
in a terminal/console window. Older versions produce errors.
The minimum requirement for developing Angular applications with Visual Studio is Update 3. Earlier versions do not follow the best practices for developing applications with TypeScript. To view your version of Visual Studio 2015, go to Help | About Visual Studio
.
If you don't have it, install Visual Studio 2015 Update 3. Or use Tools | Extensions and Updates
to update to Update 3 directly from Visual Studio 2015.
Configure Visual Studio to use the global external web tools instead of the tools that ship with Visual Studio:
Tools
| Options
Projects and Solutions
| External Web Tools
.$(PATH)
entry above the $(DevEnvDir
) entries. This tells Visual Studio to use the external tools (such as npm) found in the global path before using its own version of the external tools.Visual Studio will now look first for external tools in the current workspace and if not found then look in the global path and if it is not found there, Visual Studio will use its own versions of the tools.
While Visual Studio Update 3 ships with TypeScript support out of the box, it currently doesn’t ship with TypeScript 2, which you need to develop Angular applications.
To install TypeScript 2:
npm install -g [email protected]
.You can find out more about TypeScript 2 support in Visual studio here
At this point, Visual Studio is ready. It’s a good idea to close Visual Studio and restart it to make sure everything is clean.
Download the QuickStart source from github. If you downloaded as a zip file, extract the files.
Create the ASP.NET 4.x project in the usual way as follows:
File
| New
| Project
from the menu.Templates
| Visual C#
(or Visual Basic
) | Web
.ASP.NET Web Application
template, give the project a name, and click OK.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.
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:
Show All Files
button in Solution Explorer to reveal all of the hidden files in the project.Include in Project
. Minimally, include the following folder/files:Restore the packages required for an Angular application as follows:
package.json
file in Solution Explorer and select Restore Packages
. npm
to install all of the packages defined in the package.json
file. It may take some time.View
| Output
) to watch the npm commands execute.npm command completed with exit code 0
.Refresh
icon in Solution Explorer.node_modules
folder in the project. Let it be a hidden project folder.First, ensure that index.html
is set as the start page. Right-click index.html
in Solution Explorer and select option Set As Start Page
.
Build and launch the app with debugger by clicking the Run button or press F5
.
It's faster to run without the debugger by pressing Ctrl-F5
.
The default browser opens and displays the QuickStart sample application.
Try editing any of the project files. Save and refresh the browser to see the changes.
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") ... any path other than /
or /index.html
?
You'll have to configure the server to return index.html
for these requests. Until you do, remove the navigation path and refresh again.
© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v2.angular.io/docs/ts/latest/cookbook/visual-studio-2015.html