Please Like and Share

I have 4+ experience and working as software Engineer with Hytech professionals India PVT ltd and also working as Consultant,Trainer,Blogger and Author on Microsoft technologies,Also I have Trained more than 500+ IT professionals.I have knowledge about Asp.net,C#,SQL,Project management,replication,MVC,WebApi,SSRS,PostMan,TFS,SVN,Swagger,WMI,Agile,SignalR,Angularjs,IIS configuration.

In this article, I am
going to explain firstly how to configure an Application architecture, using
Angular2 with Visual Studio code. In this, I am using
systemjs.config.js to load modules compiled, using TypeScript compiler.
There are lots of ways to load the modules in Angularjs2 e.g Webpack, Gulp,
Grunt, etc. but I am going to develop an example, using systemjs.config.json.

If you have installed
already, then there is no need to install it again.Try to start developing an
Application on Angular2.

You just need to
follow few simple steps to develop Angular2 Application.

Step 1

Create a folder in
your local drive, where you want keep your code. If you already have any
project folder, just open Visual Studio code and select the folder.

Step 2

Now, create package.json file in your project folder. See the code and
copy.

1.{

2."name": "angular-quickstart",

3."version": "1.0.0",

4."scripts": {

5."start": "tsc&& concurrently \"tsc -w\" \"lite-server\" ",

6."lite": "lite-server",

7."postinstall": "typings install",

8."tsc": "tsc",

9."tsc:w": "tsc -w",

10."typings": "typings"

11. },

12."licenses": [{

13."type": "MIT",

14."url": "https://github.com/angular/angular.io/blob/master/LICENSE"

15. }],

16."dependencies": {

17."@angular/common": "~2.1.0",

18."@angular/compiler": "~2.1.0",

19."@angular/core": "~2.1.0",

20."@angular/forms": "~2.1.0",

21."@angular/http": "~2.1.0",

22."@angular/platform-browser": "~2.1.0",

23."@angular/platform-browser-dynamic": "~2.1.0",

24."@angular/router": "~3.1.0",

25."@angular/upgrade": "~2.1.0",

26.

27."angular-in-memory-web-api": "~0.1.5",

28."bootstrap": "^3.3.7",

29."core-js": "^2.4.1",

30."reflect-metadata": "^0.1.8",

31."rxjs": "5.0.0-beta.12",

32."systemjs": "0.19.39",

33."zone.js": "^0.6.25"

34. },

35."devDependencies": {

36."concurrently": "^3.0.0",

37."lite-server": "^2.2.2",

38."typescript": "^2.0.3",

39."typings": "^1.4.0"

40. }

41.}

In package.json, you
need to add the dependencies of your project. You can change project.json file,
as per your project's need.

Step 3

Create file tsconfig.json. This file is used to compile TypeScript code. See
the code given below.

1.{

2."compilerOptions": {

3."target": "es5",

4."module": "commonjs",

5."moduleResolution": "node",

6."sourceMap": true,

7."emitDecoratorMetadata": true,

8."experimentalDecorators": true,

9."removeComments": false,

10."noImplicitAny": false,

11."watch": true

12. } ,

13."compileOnSave": true

14.}

"complieOnSave"
is used to compile the code, once you save or CTRL+S.

Step 4

Create typings.json. This file contains TypeScript compiler libraries. See the
code given below.

1.{

2."globalDependencies": {

3."core-js": "registry:dt/core-js#0.0.0+20160725163759",

4."jasmine": "registry:dt/jasmine#2.2.0+20160621224255",

5."node": "registry:dt/node#6.0.0+20160909174046"

6. }

7.}

Step 5

Create an app folder. Now, your project will look, as shown below.

Ignore other given file for o now.

Step 6

Now, you need to install dependencies, using npm command. Open the integrated
terminal from view tab or CTRL+` and go to the project path. Type npm
command "npm install" and wait for 1-2 minutes. Thereafter,
node_module and typing folder will be created automatically inside the project.

First, press F1 or CTRL+SHIFT+P in Visual Studio code and type launch in the
address bar on the top of the editor, select node.js file from the selection
list. Once you select launch.json file, it will be created under .vscode
folder.

In order to launch Angular2 Application,
launch.json will use the lite-Server, which is defined in node_modules. Change
the program property from “${workspaceRoot}/app.js” to
“${workspaceRoot}/node_modules/lite-server/bin/lite-server”.

tasks.json
Press F1 or CTRL+SHIFT+P and type “task”, select “Configure Task runner” and
subsequently use Typescript-Watch Mode.This will create tasks.json, which will
be created under .vscode folder.

Remove the arguments
from argsproperty, as we don’t require it now and add new property as
“watch”:true. Now, we are ready to run Application. To start an Application,
type "npm start" command. After build completes, click F5. For more
details, go to my GitHub and download the code using git command. To get the
code in your local drive, use git command :: "git clone https://github.com/Bikeshs/Angular2-Typescript" therefater run
"npm install".

Remember,don't forget install npm,git.

Conslusion

After running the Application, you will see like magic because all ts file
has been compiled into JS file and inside the app folder, all ts file make js
file, using tsc compiler.

You have just read an article that categorized by title AngularJs 2
by title Getting Started With Angular 2 Using Visual Studio Code. You can bookmark this page with a URL https://bikeshsrivastava.blogspot.com/2017/04/part-45getting-started-with-angular-2.html. Thank You!

Author: Bikesh Srivastava - Sunday, 16 April 2017

1 comments for "Getting Started With Angular 2 Using Visual Studio Code"

AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. Read on to find out how.