Angular2 : Creating an ASP.Net MVC and Angular2 hybrid application – Prerequisites

Prerequisites and Installation

 Visual Studio 2015 with Update 3

1) Check the details of Visual Studio 2015 by opening Visual Studio  and navigating to Help -> About Microsoft Visual Studio. You need Visual Studio 2015 with update 3. Else Download latest version of Visual Studio 2015 Community Edition with recent update (Update 3).

Install NodeJS and NPM

Install NodeJS from https://nodejs.org/en/.  Node and NPM are required for angular development.

Install Node.js Tools for Visual Studio

Install NodeJS Tools for Visual Studio as well. Below are the steps to install NodeJS Tools for visual studio,

1) Open Visual Studio 2015. Navigate to Tools -> Extensions and Updates
2) Choose Online
3) In search box enter NodeJS
4) Click on download and install the latest version. The version I installed is 1.2.

Install Typescript

1) Open Visual Studio 2015. Navigate to Tools -> Extensions and Updates
2) Choose Online
3) In search box enter typescript
4) Click on download and install the latest version. The version I installed is 2.2.
This version is needed for building application using Angular4, else you may get build errors.

You can check the installed version of typescript by navigating to help -> About Microsoft Visual Studio. Look for the Typescript details.

Latest version of TypeScript is available from https://www.typescriptlang.org/index.html#download-links. You can also install choosing options available in this page.

Configure External Web tools

Open Visual Studio -> Tools -> Options
Options dialog window will open. Select External Web Tools from left pane.
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 the global 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.

 

Leave a Reply

Your email address will not be published. Required fields are marked *