Configuring Angular 2 with Visual Studio 2015
1.
Install Node.js from below Path based on your system
requirement.
Check which version of node has installed.
It should be 3.x.x.x
2.
Install Visual Studio 2015 Update 3.
You can verify it from
If you don’t have you can download Visual
Studio 2015 Update 3 from below link.
Community
Professional
Enterprise
3.
Configure visual studio for node and npm.
Tools à
Options à
Projects and Solution à
External Web Tools
Changes the Order of left side listed items
as like screen.
4.
Need to install type script for Visual Studio
2015.
To work with angularjs 2 you need to have
type script 2.2 and above.
You can see the type script version from.
You can install the type script from below
path.
5.
Create an Empty Visual studio application.
Start Visual Studio à select Web Application à
Select template from below window
6.
Download the helper files of angular2 from below
path of GIT. Which will help to configure the Angular application.
7.
Copy that quick start files that we have downloaded
from GIT. We need to copy the below files and paste into root folder of
project.
Once you paste into application location
click on Icon as “Show all files”. You can see the list of file their.
Include all this files and folder into
project.
Right Click on File à Include into Project
When you include the src folder it will as with
message as below and click on “No”
8.
Restore the packages of nugget package like
below.
One it will install the Packages
successfully. You can see the Node Module Folder. ** Don’t include the Node
module folder into project.
9.
Run the project from command Window.
-
It launch the type script compiler and compile
the code.
-
It will launch the lite server and
communicate to the browser.
-
Than it will launch the browser and we will see
the output as below.
Now change the context of the file you don’t need to run the application
again it will directly reflect to you browser.
Changed the name as Angular 2
10.
Need to configure the application now so it will
run on F5 of visual studio.
Do the changes in index.html
Changes in systemjs.config.js
Changes in tsconfig.json file.
Now set the start page as Index.html.
No comments:
Post a Comment