Kick Start with AngularJS 2.0 and Visual Studio

  • 5) At root directory add typings.json and below code in it( you can also try this with command prompt in same directory execute the command npm i -g typings)
  • 6) At root directory add tsconfig.json with following code( You can configure this also by npm install tsconfig)
  • At the end of this application you must be able to launch you first AngularJs 2.0 Application with Visual Studio 2015.
  • Proejct Note : please locate your project e.g [C:\Users\b\Desktop\WP\WP] from command prompt then execute the npm install
  • 9) Add the following code in all three relevent files

This article is intended to deliver a kick start understanding about AngularJs 2.0 and Visual Studio.; Author: AHMAD ANAS; Updated: 11 Jan 2017; Section: Node.js; Chapter: Web Development; Updated: 11 Jan 2017

@ankosft: This article is intended to deliver a kick start understanding about #AngularJs 2.0 and #VisualStudio.

Proejct Note : please locate your project e.g [C:\Users\b\Desktop\WP\WP] from command prompt then execute the npm install

In this article I will demostrate to start with Angular 2.0 using Microsoft TypeScript 2.0 over .NET Framework with Visual Studio 2015.

Node.js is an open-source, cross-platform JavaScript runtime environment for developing a diverse variety of tools and applications. Visual Studio is an IDE for developing variety of application developed and supported by Microsoft. In this article, I will show you to work with Node.js using the IDE Visual Studio 2015.

Before we start you need to make sure few following requirements that your system meet.

NodeJS : It is noting but server side javascript. You can download NodeJs setup for your machine from here.

NPM : NPM is kind of resource manager for multiple piece of scripts that may like to work together for single project it provides them environment. You can find npm here.

TypeScript ^2.0 : TypeScript is a programming language and used by Angular 2.0 developer team as core language to work with Angular 2.0 You can download the setup from here.

Visual Studio 2015 with Update 3 is the said to be minimum requirement to work with Node.js application configurations and settings.

Now, let get started with building a simple application and launch your first application. In this application we will go through 11 simple steps to launch the application. I have tried to simplify the steps by writting possible details about it. Not in general but it may require specific debugging on your system you may post your comment below.

1) File -> New -> Project -> [Create an Empty Web project from templete]  -> [Click OK and launch Project]

2) Copy the project path and open it in command prompt to do this right click on Solution Explorer and [Open Folder in File Explorer]

    cd {Your Path}

3) Check few this to ensure the things are correct so far by running these commands 

    node -v  It should be > v6.x.x

    npm -v    It should be > v4.x.x

    tsc -v    It should be > v2.x.x  

Get update if you find any older version of any of these. If tsc gives an older version then it mean you probably have installed any version of typeScript earlier and may require to update the system variable. To do this go to Computer -> Properties(right click) -> Advance system settings -> Environment variable -> System variable -> path(click edit) then Find the typescript path and update it to latest.

Warning : Change carefully in system variable if you are not sure then know it before any change.

4) Now, go to command prompt and run the following command npm init. Give it a name ‘angular2’ when ask and accept all the default by hitting enter. Eventually it will adds a package.json file in your project. Include this file in your project be right click. Change the code to the following (remember we could have done this directly by GUI but I proceeded this way to let you explore the way npm usually works). Now, copy and past this code in your just included package.json file 

5) At root directory add typings.json and below code in it( you can also try this with command prompt in same directory execute the command npm i -g typings)

6) At root directory add tsconfig.json with following code( You can configure this also by  npm install tsconfig)

{ ” compilerOptions”: { ” experimentalDecorators”: true, ” moduleResolution”: ” node” } }

7) Add index.html and past the following code

8) Now add app folder in root directory and add three files in this app.component.ts, app.module.ts and index.ts

Note : click no if any configuration popups

9) Add the following code in all three relevent files 

app.component.ts

app.module.ts 

index.ts 

10) Add systemjs.config.js at root folder with following codes

11) On the command prompt in same directory execute the command npm install

Note : Additional Setting may bother you to set it go to Tool -> Option -> Project and Solution Click on External Web Tools and place $(PATH) before $(DevEnvDir)\{Anything}..

At the end of this application you must be able to launch you first AngularJs 2.0 Application with Visual Studio 2015. This will be kick and ride must be on. Happy learning, happy coding!

Kick Start with AngularJS 2.0 and Visual Studio