Visual Studio 2015,angular2 for Development QuickStart __ANGULAR2

This article describes the steps required to implement "fast start" with angular in the ASP.net 4.x project of Visual Studio 2015.

ASP.net 4.x project

The steps to achieve "fast start" in Visual Studio's ASP.net 4.x project are as follows:

Prerequisites: Install Node.js

The first step: Download the "Fast start" file

Step two: Set up Visual Studio to support the typescript

Step three: Create a Visual Studio asp.net project

Step Fourth: Copy the files from "fast start" to the ASP.net project directory

Step Fifth: Recover the required packages

Step Sixth: Edit the typescript configuration file

Step seventh: Build and Run application Prerequisites: Node.js

If you do not have node.js® and NPM on your computer, please install them .

To run Node-v and npm-v in the terminal or console, make sure your node version is 4.4.x-5.x.x and NPM's version is 3.x.x . Old versions can cause errors. The first step: Now the "fast start" file

Download the "Fast Start" source code from the GitHub. If the download is a compressed zip file, unzip it. Step Two: Set up Visual Studio to support the typescript

Make sure that your Visual Studio 2015 is the latest version, and then open Visual Studio and install the latest Typescript tool:

Open Tools | Extensions and Updates.

Select Online in the left directory tree.

Search the typescript in the upper-right corner of the box.

Select the latest version of Typescript.

Download and install the dependency pack. Step Three: Create a Visual Studio asp.net project

Follow these steps to create a ASP.net 4.x project:

In Visual Studio, select File | New | The Project menu.

In the template tree, select Templates | Visual C # (or Visual Basic) | Web menu.

Select the asp.net Web application template, enter the project name, and click the "OK" button.

Choose your favorite asp.net 4.5.2 template and click OK.

This cookbook selects the Empty template, it has not added any directories, no authentication, no server hosting. Choose the right templates and options for your project. Step Fourth: Copy the "Fast start" file to the directory where the ASP.net project is located

Copy the "Quick Start" file downloaded from github to the directory containing the. csproj file. Follow these steps to add them to Visual Studio:

Click the Show All Files button in Solution Explorer to display all hidden files in the project.

Right-click each directory and file and select Include in Project. To add at least the following files:

App Directory (if asked if you want to search for typescript type, answer No)

Styles.css

Index.html

Package.json

Tsconfig.json

Typings.json Step Fifth: Recover the required packages

Follow the steps below to recover the packages required by the angular application:

Right-click Package.json in Solution Explorer and select Restore Packages.
In this way, Visual Studio uses NPM to install all the packages that are defined in Package.json. This may take a little time.

If you want, open the Output window (View | Output) to monitor the implementation of the NPM command.

Ignore all warnings.

When the recovery is complete, a message appears: NPM command completed with exit code 0.

In Solution Explorer, click the Refresh icon.

do not add the Node_modules directory to your project, so that it is hidden.

The error "@angular/compiler is isn't in" registry indicates that Visual Studio 2015 uses the old version of NPM. Follow these steps to install the latest version of NPM:

Tools | Options to open the Option dialog box.

In the tree directory on the left, select Projects and Solutions | External Web Tools.

On the right, move the $ (PATH) item to $ (DEVENVDIR), which tells Visual Studio to prioritize the search for foreign tools (such as NPM) in your path.

Click OK to close the dialog box.

Restart Visual Studio for these modifications to take effect.