Topics
Published on May 18, 2017 by kudvenkat

Text version of the video
csharp-video-tutorials.blogspot.com/2017/05/setting-up-angular-2-in-visual-studio.html

Slides
csharp-video-tutorials.blogspot.com/2017/05/setting-up-angular-2-in-visual-studio_18.html

In this video we will discuss how to set up Angular 2 in Visual Studio.

Step 1 : The first step is to install Node.js and npm. It is recommended that you have node version 4.6.x or greater and npm 3.x.x or greater. To check the versions that you have on your machine type the following commands in a command window.
node -v
npm -v

You can get the latest version of Node.js from the following website.
nodejs.org/en/download

Step 2 : Make sure you have Visual Studio 2015 Update 3 installed. To check the version of Visual Studio you have click on the “Help” menu and then select “About Microsoft Visual Studio”

Download links
Visual Studio Enterprise 2015 – Update 3
download.microsoft.com/download/8/4/3/843ec655-1b67-46c3-a7a4-10a1159cfa84/vs2015.3.ent_enu.iso

Visual Studio Professional 2015 – Update 3
download.microsoft.com/download/e/b/c/ebc2c43f-3821-4a0b-82b1-d05368af1604/vs2015.3.pro_enu.iso

Visual Studio Community 2015 – Update 3
download.microsoft.com/download/b/e/d/bedddfc4-55f4-4748-90a8-ffe38a40e89f/vs2015.3.com_enu.iso

Step 3 : Configure environment settings for node and npm in Visual Studio.
1. In Visual Studio click on Tools – Options.
2. In the “Options” window, expand “Projects and Solutions” and select “External Web Tools”
3. In the right pane, move the global $(PATH) entry to be above the internal path $(DevEnvDir) entries. This tells Visual Studio to look for external tools (like npm) in the global path before the internal path.
4. Click “OK” to close the “Options” window and then restart Visual Stduio for the changes to take effect

Step 4 : Install TypeScript for Visual Studio 2015
To develop Angular applications you need TypeScript 2.2.0 or later
To check the version of TypeScript, clik on the “Help” menu in Visual Studio and select “About Microsoft Visual Studio”
Download and install the latest version of TypeScript for Visual Studio 2015 from the following URL
www.microsoft.com/en-us/download/details.aspx?id=48593

Step 5 : Create Empty ASP.NET Web Application project

Step 6 : Download the “Quick Start Files” from the Angular web site.
github.com/angular/quickstart

Step 7 : Copy the required “Starter files” to the web application project

Step 8 : Restore the required packages.
In the “Solution Explorer” right click on “package.json” file and select “Restore Packages” from the context menu. This takes a few minutes to load all the modules. You can see the status in “Visual Studio Output” window. After the restoration is complete, you will see a message “Installing Packages Complete”. To see all the installed node modules, click on “Show all Files” icon in Solution Explorer. DO NOT include “node_modules” folder in the project.

Step 9 : Run the project

In the “RUN” window type “cmd” and presee enter
Change the directory in the command prompt to the directory where you have the web application project.
Type “npm start” and press “Enter” key
This launches the TypeScript compiler (tsc) which compile the application and wait for changes. It also starts the lite-server and launches the browser where you will see the output – Hello Angular.
At this point, open “app.component.ts” file from “Solution Explorer”. This file is present in “app” folder in “src” folder.
Change “name” value from “Angular” to “Angular 2!” and you will see the changes reflected on the web page automatically.

At the moment we do not have the capability to run the project by pressing F5 or CTRL + F5. We will discuss how to do this in our next video.

Leave a Reply

85 Comments on "Setting up Angular 2 in Visual Studio"

Notify of
avatar

Shivam Shukla
Guest
Shivam Shukla
1 month 4 hours ago
i am getting when doing npm start=================================Error occured when executing command: npm run serveError: spawn cmd.exe ENOENTat exports._errnoException (util.js:1026:11)at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)at onErrorNT (internal/child_process.js:359:16)at _combinedTickCallback (internal/process/next_tick.js:74:11)at process._tickCallback (internal/process/next_tick.js:98:9)at Module.runMain (module.js:606:11)at run (bootstrap_node.js:394:7)at startup (bootstrap_node.js:149:9)at bootstrap_node.js:509:3Error occured when executing command: npm run serveError: spawn cmd.exe ENOENTat exports._errnoException (util.js:1026:11)at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)at onErrorNT (internal/child_process.js:359:16)at _combinedTickCallback (internal/process/next_tick.js:74:11)at process._tickCallback (internal/process/next_tick.js:98:9)at Module.runMain (module.js:606:11)at run (bootstrap_node.js:394:7)at startup (bootstrap_node.js:149:9)at bootstrap_node.js:509:3[1] npm run serve exited with code -4058npm ERR! Windows_NT 6.3.9600npm ERR! argv "C:Program Filesnodejsnode.exe" "C:Program Filesnodejsnode_modulesnpmbinnpm-cli.js" "start"npm ERR! node v6.9.0npm ERR! npm v3.10.8npm ERR! code ELIFECYCLEnpm ERR! angular-quickstart@1.0.0 start: concurrently "npm run build:watch" "npm run serve"npm ERR! Exit status… Read more »
AxleWack
Guest
AxleWack
1 month 20 hours ago

Your videos are very easy to follow! Keep them coming 🙂

venkat pal
Guest
venkat pal
1 month 4 days ago

I was surprised that you choose the VS instead if VS Code. Any reasons, i know the developers who are working on NG2 using VS CODE

ravikumar mutyala
Guest
ravikumar mutyala
1 month 6 days ago

how to integrate angular2 with eclipse

David Donadze
Guest
David Donadze
1 month 7 days ago

omg dude u are the best

Garima Jain
Guest
Garima Jain
1 month 13 days ago

I am using visual studio professional 2013.. just want to know i also need to do same thing or. visual studio 2015 update3 is mandatory

Sunil Reddy
Guest
Sunil Reddy
1 month 14 days ago

Hi Sir, I have VS 2017 (community edition) installed. I found that the changes to .ts and .js files mentioned in the video are not necessary. The browser page refreshes itself immediately after saving in VS 2017. So at any point of free time please explain this so that there won't be any confusion whether to make changes or not.

Venkata Prasanna Perumalla
Guest
Venkata Prasanna Perumalla
1 month 18 days ago

Hi Sir, Thanks for starting Angular 2 series. Waiting for more video's … You are Awesome 🙂 .

Mujtaba Hussain Bhat
Guest
Mujtaba Hussain Bhat
1 month 19 days ago

Hello sir i want to know how i setup angular2 in webstorm

Rachit Jain
Guest
Rachit Jain
1 month 21 days ago

Thank u sir 🙂

wpDiscuz