Setting up Angular 2 in Visual Studio Video Lecture | Angular 2 tutorial - Front-End Programming

this is part two of angular 2 tutorial
in this video we'll discuss the software
is required and the steps to setup
angular 2 in Visual Studio 2015 the
first software that we need is node we
need to install node and NPM both of
them are part of a single download and
we can download node from this URL right
iya so when we navigate to that page we
see several versions of node here so the
first obvious question that comes to our
mind is which one should i download well
that depends on the type of operating
system you have if you have vendors like
me then you download the Windows
versions they have two Windows versions
here so which one should i download that
depends on whether you have 32 or 64-bit
operating system to determine what
operating system you have in the run
window type msinfo32 and click ok this
brings up the system information window
on the left select system summary and on
the right look at this system type if it
says x64 based PC then that means you
have 64-bit operating system if it says
x86 based PC then you have 32-bit
operating system so depending on whether
you have 32 or 64-bit operating system
download the appropriate version of node
now this will download an MSI file into
your downloads folder right-click on
that and select install and then follow
the simple on-screen instructions to
install node one important thing to keep
in mind is that to develop angular
applications we need node version 4.6.1
BM version 3 dot dot X or greater to
verify the versions of node and NPM we
can use these two commands right here we
run these commands from the command
prompt so again in the run window type
CMD and click OK this brings up the
command window and here if I type node -
V we get the node version and if we type
NPM - V we get the NPM version so that's
our first step install node and NPM but
one important thing to keep in mind is
that if we don't have node installed and
if you use these commands node and NPM
but
command window you might see a message
saying NPM is not recognized as an
internal or external command so that's
an indication that you don't have note
installed at all this next step is to
install Visual Studio 2015 update 3 to
verify the version of Visual Studio you
have click on help about Microsoft
Visual Studio and then in here you can
see I have Microsoft Visual Studio 2015
update 3 now if you don't have update 3
I'll have the link available in the
description of this video and on my blog
so you can download and install it the
next step is to configure environment
settings for node and NPM to do this
within Visual Studio click on tools and
then select options within the options
window expand projects and solutions and
select external web tools we need to
move this global path entry to be about
these two entries dev environment
directories to move it up select the
path entry and then click the up arrow
this tells Visual Studio to look for
external tools like NPM in the global
path before these two internal paths and
then finally click OK to finalize the
environment settings for node and NPM
next we need to install typescript for
Visual Studio 2015 to download
typescript visit this URL right here
once we navigate to that page we have
the download button click the download
button to download the typescript
executable to your downloads folder here
we have the type script executable right
click on that and select run as
administrator and follow the on-screen
instructions to install typescript 4
which is Studio 2015 one important thing
to keep in mind is that to develop
angular applications we need typescript
2 dot 2.0 or later to verify the version
of typescript you have within Visual
Studio click on help and then select
about Microsoft Visual Studio and as you
scroll down in the list you will find
the version of typescript you have the
next step is to create an empty HP
dotnet web application project so let's
slip to Visual Studio click on file new
project
select web or no visual c-sharp in the
middle pane select a speed or net web
application and let's name our project
angular 2 demo and then click OK
on this screen select the empty template
and click OK this creates the asp.net
web application project for us now we
need to download the QuickStart files
from angular website here is the URL for
that once we navigate to that URL on the
page we have this green button to lunar
download once we click on that we have
the option to download the QuickStart
files as a zip folder which I have
already done and within our downloads
folder I have the zip file which
contains the starter files the next step
is to copy the required starter files to
the hd25 application project that we
have just created first we need to
extract the contents of the zip folder
which I have already done and here is
the extracted folder within this folder
we've got several files and folders we
don't need all these beneath the source
folder its subfolders and contents and
we need vias conflict or treason package
so Jason and PS length da Jason so let's
copy these and we need to paste these
files and folders within the root
directory of the asp.net web application
project behind our project angular 2
demo and the solution is also named
angular 2 demo and this is present
within C Drive so when we open the
project folder in File Explorer we will
see we have angular 2 demo folder inside
another angular 2 demo folder this first
angular 2 demo folder is the solution
folder and this is the project folder
and this is the folder in which the
starter files need to go so let's place
them in this folder and then let's click
this show all files icon within the
solution Explorer now we can see the
files and folders that we have just
pasted so let's expand the source folder
its subfolder app so we need all these
files and folders to be included in the
project so I will to select all of them
until be as config dot Jason this
package dot Jason and this package is to
well this is created by witches studio
when we created a project and it's
already included in the project so we
don't need to include that and this TS
length dot Jaisal is also this sort of
file and needs to be able to rain the
project so let's select that as well and
at this point let's right-click and
select this option including project now
we have a prompt here search for
typescript Taipings when you get this
prompt click gnome so at this point we
have included all the starter files
within our asp.net web application
project well this is what these files
are and their purpose in detail in our
upcoming videos the next step is to
restore the required packages to do this
we simply have to right-click on package
dot J's and starter file and then select
this option resto packages from the
context menu this is going to
automatically install all the required
packages for us so let's do that now
within Visual Studio right click on
package store Jason and select restore
packages from the context menu and in
the visual studio status bar here you
can see the progress and within the
output vendor notice it is executing
this command NPM install so it's going
to take a few seconds to install all the
required packages for us the restoration
is now complete notice we have caught a
few warnings here but we can safely
ignore them and within the status bar
notice the message installing packages
complete and to see all the node modules
that are installed click on the show all
files Ike and it's already clicked and
notice at the moment we don't have node
underscore modules folder here so let's
click on it once and then click on it
again to show all the files notice we
have this node underscore modules folder
and within that we have all the required
node modules so one important thing here
to keep in mind is that we should not
include this node underscore modules
folder is the project the final thing
that we need to do is run the project
and we are going to do that from the
command vendor so first let's fire up
the command window
and we need to navigate to the root
directory of our asp.net web application
project we know we have created our
project in C Drive this solution folder
is angular to demo the project folder is
also angular to demo now we type this
command NPM start and then press Enter
it's going to do a couple of things
first it's going to launch the
typescript compiler and then compile the
application code so notice here we have
PS c typescript compiler and a few
seconds it's also going to launch light
server which is going to launch the
browser and we can see the output in the
browser so it's going to take a few more
seconds to launch the light server which
in turn will launch the browser so the
light server is launched now it's going
to launch the browser and within the
browser we will see hello angular so
here is the output and this is coming
from index dot HTML file this is the
starter file that we have downloaded
from the angular website but lists all
these starter files in their purpose in
our upcoming videos in detail and then
the code is present in this file app
component dot TS notice here we have the
code and if we change the value here
from angular at the moment notice it is
displaying hello angular so if we change
this to angular 2 and then when we save
the changes you know the light server is
listening for those changes and the
changes will be automatically picked up
and displayed in the browser at the
moment we are running our project using
command window but I prefer running this
visual studio project using F I work
ctrl f5 we don't have that capability at
the moment let's see what happens if we
try to do that let's set index dot HTML
as the start page and then run our
project by pressing ctrl f5 notice we
are able to navigate to index dot HTML
and we see this message loading F
component here but it doesn't do
anything beyond that let's launch
browser developer tools and within the
console we can
several errors so in our next video
we'll discuss how to configure our
project so we can run it by pressing f5
or ctrl f5 thank you for listening and
have a great day