Topics
Published on May 18, 2017 by kudvenkat
Want create site? Find Free WordPress Themes and plugins.

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.

Did you find apk for android? You can find new Free Android Games and apps.

Leave a Reply

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

Notify of
avatar

Dilip Solanki
Guest
Dilip Solanki
2 months 26 days ago

Why do we need node.js for angular 2? As angular and node they both are different JavaScript frameworks altogether. I mean in angular-1, we did not use any node js installment. Can you please brief about it?

Thanks

Lim Weihan
Guest
Lim Weihan
3 months 18 hours ago

Thanks Sir!! As a beginner for Angular2 , i am really appreciated of your video and your hardwork to assist on my angular learning

vamsi chand
Guest
vamsi chand
3 months 2 days ago

I am getting errors while restoring packages

Shiva Shivakumara
Guest
Shiva Shivakumara
3 months 7 days ago

package are not loading properly import { Component } from '@angular/core';above code is highlighted as red , and showing its typescript feature 1.5 , current language level is 1.4 ,i hv installed typescript 2.4 and node v 6.X

sabyasachi de
Guest
sabyasachi de
3 months 10 days ago

Don't know how every time Venkat simplifies complex things in a single video that exactly I was looking for .

Bhushan Patil
Guest
Bhushan Patil
3 months 12 days ago

Thank You Dear Sir

Alok Raj
Guest
Alok Raj
3 months 14 days ago

In visual studio 2017 how can i use angular js 2 program

Ravi Roi
Guest
Ravi Roi
3 months 15 days ago

Sir i facing these errors when i copied the starter files. Please help me out. thank you.1. Build:Cannot find module '@angular/core'.2. Cannot find module '@angular/platform-browser'.3. Cannot find module '@angular/platform-browser-dynamic'.4. Cannot find module '@angular/core/testing'.

ayan chakraborty
Guest
ayan chakraborty
3 months 17 days ago

====Executing command 'npm install'====npm ERR! Windows_NT 10.0.15063npm ERR! argv "D:\Node Js\node.exe" "D:\Node Js\node_modules\npm\bin\npm-cli.js" "install"npm ERR! node v6.11.2npm ERR! npm v3.10.10npm ERR! shasum check failed for C:UsersayancAppDataLocalTempnpm-220-02be931eregistry.npmjs.orgtypescript-typescript-2.1.6.tgznpm ERR! Expected: 40c7e6e9e5da7961b7718b55505f9cac9487a607npm ERR! Actual: 31175e0478ab5cb3f1b436070a43fa29e8f938cdnpm ERR! From: registry.npmjs.org/typescript/-/typescript-2.1.6.tgznpm ERR! npm ERR! If you need help, you may report this error at:npm ERR! <github.com/npm/npm/issues&gt;npm ERR! Please include the following file with any support request:npm ERR! c:usersayancdocumentsvisual studio 2015ProjectsAngular2DemoAngular2Demonpm-debug.log====npm command completed with exit code 1====node_modules folder is not getting generated…

Rahul Pathak
Guest
Rahul Pathak
3 months 17 days ago

f we configure this for anglar 2 then it should have any effect for other solutions?

1 2 3 12
wpDiscuz