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

Bhavin Jadav
Guest
Bhavin Jadav
30 days 3 hours ago

Can any one explain, how to deploy this web site on the server. As i have already created a web site using the method mentioned in the video. But I don't know now how to deploy it on the server. Please help me….

lanka patrudu
Guest
lanka patrudu
1 month 10 hours ago

Bro…Please can you tell installation procedure in mac

Bhavin Jadav
Guest
Bhavin Jadav
1 month 22 hours ago

Is there any way I can publish this simple web by just using the visual studio publish(File system publish) and deploy on other server?If anyone found it please let me know.

kunal ad
Guest
kunal ad
1 month 7 days ago

Please need video on setting IIS on IIS server instead of IIS express

bhogini chinmayee
Guest
bhogini chinmayee
1 month 7 days ago

Unable to find include to the project option in solution explorer. could you plz suggest the solution for this!!

Nishal Kumar
Guest
Nishal Kumar
1 month 7 days ago

Dear Sir, the provided download links for VS 2015 update 3 shows that they are around 7.5GB, is it the right link or has it been changed? Please let me know. And also, can I do the same Environment setup in VS 2017? In fact I tried it, but I couldn't find the "External Web Tools" in the "Projects & Solutions" option. Get me back ASAP please.

Amit Arora
Guest
Amit Arora
1 month 18 days ago

Not included Node_modules folder in the project but still getting compile error in one of the internal file of this folder called node_modulesrxjsSubject.d.ts. Please help!!

Amit Arora
Guest
Amit Arora
1 month 17 days ago

I found the problem. the latest typescript version 2.4.1 has some issues it seems and hence, raised a lot of compilation errors. I downgraded to 2.3.1 and things worked., alternatively, this link could also help which talks of this."compilerOptions": { "skipLibCheck": true, }stackoverflow.com/questions/44793859/rxjs-subject-d-ts-error-class-subjectt-incorrectly-extends-base-class-obs

Arjun Gupta
Guest
Arjun Gupta
1 month 19 days ago

Can't restore package even after restarting VS 2015 Update 3Step 1: Download the QuickStart filesStep 2: Set up Visual Studio for TypeScriptStep 3: Create the Visual Studio ASP.NET projectStep 4: Copy the QuickStart files into the ASP.NET project folderStep 5: Restore required packagesi have done steps 1-4 but with step 5 i have a problemI have no "Restore Packages" option on right click in visual studio 2015 (on package.json – file)Any hints?

Badrul Hussain
Guest
Badrul Hussain
17 days 3 hours ago

check the name there is 2 package. files. And right click on the correct one!

ankit shivhare
Guest
ankit shivhare
1 month 20 days ago
Hello Sir, I am trying to create the angular2 application on Visual Studio 2017, i followed the same steps but i am facing error while restore package. It would be really better if you will get time to help me.Error:PATH=.node_modules.bin;C:Program Files (x86)Microsoft Visual Studio2017ProfessionalWebExternal;%PATH%;C:Program Files (x86)Microsoft Visual Studio2017ProfessionalCommon7IDECommonExtensionsMicrosoftTeamFoundationTeam ExplorerGitcmd;C:Program Files (x86)Microsoft Visual Studio2017ProfessionalCommon7IDECommonExtensionsMicrosoftTeamFoundationTeam ExplorerGitmingw32bin"C:Program Files (x86)Microsoft Visual Studio2017ProfessionalWebExternalnpm.CMD" installnpm ERR! Windows_NT 6.1.7601npm ERR! argv "C:\Program Files (x86)\Microsoft Visual Studio\2017\Professional\Web\External\Node.exe" "C:\Program Files (x86)\Microsoft Visual Studio\2017\Professional\Web\External\node_modules\npm\bin\npm-cli.js" "install"npm ERR! node v5.4.1npm ERR! npm v3.3.4npm ERR! code ETIMEDOUTnpm ERR! errno ETIMEDOUTnpm ERR! syscall connectnpm ERR! network connect ETIMEDOUT 151.101.8.162:443npm ERR! network This is most… Read more »
Sohail Naseer
Guest
Sohail Naseer
1 month 20 days ago

i can't restore package, not restore package option show when click right. I also have install Visual Studio 2013 with update 5 and install latest version of Node.Js and TSCHow i can resolve this problem Sir?

wpDiscuz