Angular Tutorial - Setting up the local development environment


In this blog, we will see how can we setup development environment in Visual Studio 2017 to run angular 2 application.

To setup the Angular 2 environment we need nodejs, npm and type script.
Let's install these components one by one.

First, open this URL - https://nodejs.org/en/

angular 2 tutorial

Once Node 8.12.0 installer downloaded It’s time to install.
Double click on the installer file and follow the on-screen steps.


angular 2 tutorial


To verify the installation, open command prompt and type commands to see the version installed.

angular 2 tutorial

Next, to configure Node and npm, go to Tools->Options in Visual Studio 2017 (If you have Visual Studio 2015, make sure it has update 3)

Project and Solutions – Web Package Management – External Web Tools
Move $(PATH) to up i.e. before \Web\External and click on OK.

angular 2 tutorial


 Now let’s install TypeScript.
As I am using Visual Studio 2017. Search for “TypeScript for Visual Studio 2017” in Google.
You get this link - https://www.microsoft.com/en-us/download/details.aspx?id=55258


angular 2 tutorial

Once TypeScript SDK downloads complete. Install TypeScript to your local system by double-clicking on SDK file.

angular 2 setup

angular 2 setup

Now it’s time to open Visual Studio and create a web project.

angular 2 setup

Select Empty from the Project Template.

angular 2 setup

Now you need a few support files in your project to run Angular.

Go to this URL - https://github.com/angular/quickstart and download the Zip.
Extract the downloaded zip and you will see some files and folders. Copy the highlighted file(s), folder(s) and paste it in the root directory of the web project you created.

angular 2 setup
 Now your solution explorer will look like this –

angular 2 setup

Next, right click on package.json and select Restore Packages.

angular 2 setup
 You may notice this in taskbar of Visual Studio 2017.

angular 2 setup

Now let's run this Angular application.
So as a .Net developer you may just press F5 to run this application, unfortunately, the application will not work as expected.

There are 2 options to run this application. Either you run this application using Angular CLI or make some changes to run with F5.

To demonstrate, I have hosted this application in IIS.
To host an application/website in IIS.
Open INETMGR using Run command.

Now right click on Sites from the left panel and select Add website.
Fill the details as shown in below image.


angular 2 setup


Now open index.html and make changes in <base> tag.
Make changes as highlighted in below screen.

angular 2 setup

Open systemjs.config.js and make changes as shown below.

angular 2 tutorial



Now run the application from IIS and you will get the result.

angular 2 tutorial

You may see the steps in below video as well.


In next blog, I will write about how can we run Angular Appliation using Angular CLI.

Hope you like this blog. Please like our Facebook Page
https://www.facebook.com/SharePointCafenet/
Previous Blog - Angular vs AngularJS

Interview Questions and Answers -

http://www.sharepointcafe.net/p/interview-questions-and-answers.html 



Comments

Popular