{ "id": "guide/visual-studio-2015", "title": "Using Angular with Visual Studio 2015", "contents": "\n\n\n
\n mode_edit\n
\n\n\n
\n

Using Angular with Visual Studio 2015link

\n\n

Some developers prefer Visual Studio as their Integrated Development Environment (IDE).

\n

This cookbook describes the steps required to set up and use Angular app files in Visual Studio 2015 within an ASP.NET 4.x project.

\n
\n

There is no live example for this cookbook because it describes Visual Studio, not\nthe Angular application itself. It uses the starter Angular application created by the CLI command ng new as an example.

\n
\n\n

ASP.NET 4.x Projectlink

\n

To set up the Getting Started files with an ASP.NET 4.x project in\nVisual Studio 2015, follow these steps:

\n
\n

If you prefer a File | New Project experience and are using ASP.NET Core,\nthen consider the experimental\nASP.NET Core + Angular template for Visual Studio 2015.\nNote that the resulting code does not map to the docs. Adjust accordingly.

\n
\n

\n Prerequisite: Node.js\nlink

\n

Install Node.js® and npm\nif they are not already on your machine.\nSee Local Environment Setup for supported versions and instructions.

\n

\n Prerequisite: Visual Studio 2015 Update 3\nlink

\n

The minimum requirement for developing Angular applications with Visual Studio is Update 3.\nEarlier versions do not follow the best practices for developing applications with TypeScript.\nTo view your version of Visual Studio 2015, go to Help | About Visual Studio.

\n

If you don't have it, install Visual Studio 2015 Update 3.\nOr use Tools | Extensions and Updates to update to Update 3 directly from Visual Studio 2015.

\n

\n Prerequisite: Configure External Web tools\nlink

\n

Configure Visual Studio to use the global external web tools instead of the tools that ship with Visual Studio:

\n\n

Visual Studio now looks first for external tools in the current workspace and\nif it doesn't find them, it looks in the global path. If Visual Studio doesn't\nfind them in either location, it will use its own versions of the tools.

\n

\n Prerequisite: Install TypeScript for Visual Studio 2015\nlink

\n

While Visual Studio Update 3 ships with TypeScript support out of the box, it currently doesn’t ship with more recent versions of TypeScript, which you need to develop Angular applications.

\n

To install the latest version of TypeScript:

\n\n

You can find out more about TypeScript support in Visual Studio here.

\n

At this point, Visual Studio is ready. It’s a good idea to close Visual Studio and\nrestart it to make sure everything is clean.

\n

\n Step 1: Create a starter Angular app\nlink

\n

Follow the instructions in Local Environment Setup to create a starter Angular app using the CLI command ng new.

\n

\n Step 2: Create the Visual Studio ASP.NET project\nlink

\n

Create the ASP.NET 4.x project in the usual way as follows:

\n\n
\n

This cookbook uses the Empty template with no added folders,\nno authentication, and no hosting. Pick the template and options appropriate for your project.

\n
\n

\n Step 3: Copy the Angular project files into the ASP.NET project folder\nlink

\n

Copy files from the starter Angular app into the folder containing the .csproj file.\nInclude the files in the Visual Studio project as follows:

\n\n

\n Step 4: Restore the required packages\nlink

\n

Restore the packages required for an Angular application as follows:

\n\n

\n Step 5: Build and run the app\nlink

\n

First, ensure that src/index.html is set as the start page.\nRight-click index.html in Solution Explorer and select option Set As Start Page.

\n

To run in VS with F5link

\n

Most Visual Studio developers like to press the F5 key and see the IIS server come up.\nTo use the IIS server with the Getting Started app, you must make the following three changes.

\n
    \n
  1. In index.html, change base href from <base href=\"/\"> to <base href=\"/src/\">.
    2. \n
  2. Also in index.html, change the scripts to use /node_modules with a slash\ninstead of node_modules without the slash.
    3. \n
  3. In src/systemjs.config.js, near the top of the file,\nchange the npm path to /node_modules/ with a slash.
    4. \n
\n
\n

After these changes, npm start no longer works.\nYou must choose to configure either for F5 with IIS or for npm start with the lite-server.

\n
\n

For apps that use routinglink

\n

If your app uses routing, you need to teach the server to always return\nindex.html when the user asks for an HTML page\nfor reasons explained in the Deployment guide.

\n

Everything seems fine while you move about within the app.\nBut you'll see the problem right away if you refresh the browser\nor paste a link to an app page (called a \"deep link\") into the browser address bar.

\n

You'll most likely get a 404 - Page Not Found response from the server\nfor any address other than / or /index.html.

\n

You have to configure the server to return index.html for requests to these \"unknown\" pages.\nThe lite-server development server does out-of-the-box.\nIf you've switched over to F5 and IIS, you have to configure IIS to do it.\nThis section walks through the steps to adapt the Getting Started application.

\n

Configure IIS rewrite ruleslink

\n

Visual Studio ships with IIS Express, which has the rewrite module baked in.\nHowever, if you're using regular IIS you'll have to install the rewrite\nmodule.

\n

Tell Visual Studio how to handle requests for route app pages by adding these\nrewrite rules near the bottom of the web.config:

\n\n <system.webServer>\n <rewrite>\n <rules>\n <rule name=\"Angular Routes\" stopProcessing=\"true\">\n <match url=\".*\" />\n <conditions logicalGrouping=\"MatchAll\">\n <add input=\"{REQUEST_FILENAME}\" matchType=\"IsFile\" negate=\"true\" />\n <add input=\"{REQUEST_FILENAME}\" matchType=\"IsDirectory\" negate=\"true\" />\n </conditions>\n <action type=\"Rewrite\" url=\"/src/\" />\n </rule>\n </rules>\n </rewrite>\n </system.webServer>\n\n\n
\n

The match url, <match url=\".*\" />, will rewrite every request. You'll have to adjust this if\nyou want some requests to get through, such as web API requests.

\n

The URL in <action type=\"Rewrite\" url=\"/src/\"/> should\nmatch the base href in index.html.

\n
\n

Build and launch the app with debugger by clicking the Run button or by pressing F5.

\n
\n

It's faster to run without the debugger by pressing Ctrl-F5.

\n
\n

The default browser opens and displays the Getting Started sample application.

\n

Try editing any of the project files. Save and refresh the browser to\nsee the changes.

\n\n \n
\n\n\n" }