Credit to devdocs.io

angular 2.0_typescript

angular

Visual Studio 2015 QuickStart

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

This cookbook describes the steps required to set up and use the Angular 2 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.

ASP.NET 4.x Project

The steps for setting up the QuickStart files with an ASP.NET 4.x project in Visual Studio 2015 are as follows:

  • Prerequisite: Install Node.js
  • Step 1: Download the QuickStart files
  • Step 2: Set up Visual Studio for TypeScript
  • Step 3: Create the Visual Studio ASP.NET project
  • Step 4: Copy the QuickStart files into the ASP.NET project folder
  • Step 5: Restore required packages
  • Step 6: Edit the TypeScript configuration file
  • Step 7: Build and run the app

Prerequisite: Node.js

Install Node.jsĀ® and npm if they are not already on your machine.

Verify that you are running node version 4.4.x - 5.x.x, and npm 3.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors.

Step 1: Download the QuickStart files

Download the QuickStart source from github. If you downloaded as a zip file, extract the files.

Step 2: Set up Visual Studio for TypeScript

Ensure you have the latest version of Visual Studio 2015 installed. Then open Visual Studio and install the latest set of TypeScript tools as follows:

  • Open Tools | Extensions and Updates.
  • Select Online in the tree on the left.
  • Search for TypeScript using the search box in the upper right.
  • Select the most current available TypeScript version.
  • Download and install the package.

Step 3: Create the Visual Studio ASP.NET project

Create the ASP.NET 4.x project as follows:

  • In Visual Studio, select File | New | Project from the menu.
  • In the template tree, select Templates | Visual C# (or Visual Basic) | Web.
  • Select the ASP.NET Web Application template, give the project a name, and click OK.
  • Select the desired ASP.NET 4.5.2 template 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.

Step 4: Copy the QuickStart files into the ASP.NET project folder

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:

  • Click the Show All Files button in Solution Explorer to reveal all of the hidden files in the project.
  • Right-click on each folder/file to be included in the project and select Include in Project. Minimally, include the following folder/files:
    • app folder (answer No if asked to search for TypeScript Typings)
    • styles.css
    • index.html
    • package.json
    • tsconfig.json
    • typings.json

Step 5: Restore the required packages

Restore the packages required for an Angular application as follows:

  • Right-click on the package.json file in Solution Explorer and select Restore Packages.
    This uses npm to install all of the packages defined in the package.json file. It may take some time.
  • If desired, open the Output window (View | Output) to watch the npm commands execute.
  • Ignore the warnings.
  • When the restore is finished, a message should say: npm command completed with exit code 0.
  • Click the Refresh icon in Solution Explorer.
  • Do not include the node_modules folder in the project. Let it be a hidden project project folder.

An error such as "@angular/compiler is not in the npm registry" suggests that Visual Studio 2015 is using an older version of npm. Update to the latest installed version of npm:

  • Tools | Options to open the Options dialog.
  • In the tree on the left, select Projects and Solutions | External Web Tools.
  • On the right, move the $(PATH) entry above the $(DevEnvDir) entries. This tells Visual Studio to use the external tools (such as npm) found in your path before using its own version of the external tools.
  • Click OK to close the dialog.
  • Restart Visual Studio for this change to take effect.

Step 6: Edit the TypeScript configuration file

For Visual Studio 2015 we must add "compileOnSave": true to the TypeScript configuration (tsconfig.json) file as shown here.

tsconfig.json (scripts)

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "compileOnSave": true
}

After making this change, exit Visual Studio and reopen it to reload the project.

Step 7: Build and run the app

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

This launches the default browser and runs the QuickStart sample application.

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

Compiler errors such as "Property map does not exist on type Observable<Response>" and "Observable cannot be found" indicate an old release of Visual Studio. Exit Visual Studio and follow the instructions here.

You'll be asked to replace the file

c:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript.typescriptServices.js

This operation requires admin privileges.

Note on Routing Applications

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")? We'll have to configure the server to return index.html for these requests. Until we do, remove the navigation path and refresh again.

© 2010–2016 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html