How to setup and install Angular5 Environment(NPM, Node JS, Visual studio code, Type Script, Github)

INSTALLATION OF Node.js and NPM

++++++++++++++++++++++++++++++++++++++++++++++++++++++++

-> download  required version from the link https://nodejs.org/en/

-> install it

-> after installing goto run command

-> cmd interface

-> check whether node.js is installed or not

-> to check whether node.js installed or not enter the command  node -v

->to check whether npm is installed along with the node.js enter the command npm -v

INSTALLATION OF ANGULAR CLI ENVIRONMENT

++++++++++++++++++++++++++++++++++++++++++++++++++++++++

->you can install it by using the command  npm  install -g  @angular/cli

-> (or) you can refer the website https://cli.angular.io/  

-> To check whether installed CLI environment or not use the command ng -v

It shows as follows

Angular CLI :  1.7.3

Node : 9.7.1

OS :  win32 x64
Angular :

...

INSTALLATION OF TYPESCRIPT

++++++++++++++++++++++++++++++++++++++++++++++++++++++++

->you can install it by downloading from the website  https://www.typescriptlang.org/

->(or) you can install it with the help of npm environment by using the command

        npm  install  -g typescript

-> to check whether it is installes or not and its version use the command tsc -v

-> Typescript is built and updated every night inorder to update every type of the night update

 we use the command   npm install -g  typescript@next

-> once again check its version and whether it is installed or not by using the command  tsc -v

INSTALLATION OF BOOTSTRAP ENVIRONMENT

++++++++++++++++++++++++++++++++++++++++++++++++++++++++

->you can install it by downloading from the website  https://getbootstrap.com/

-> (or) you can install it by using the command  with the help of npm environment

    npm install -g bootstrap

INSTALLATION OF YARN ENVIRONMENT

++++++++++++++++++++++++++++++++++++++++++++++++++++++++

->you can install it by downloading from the website  https://yarnpkg.com/en/

-> (or) you can install it by using the command  with the help of npm environment

    npm install -g yarn

INSTALLATION OF GITHUB ENVIRONMENT

++++++++++++++++++++++++++++++++++++++++++++++++++++++++

->you can install it by downloading from the website  https://gitforwindows.org/

-> It uses the linux based commands for the git shell

INSTALLATION OF Visual studio code

++++++++++++++++++++++++++++++++++++++++++++++++++++++++

-> You can install it by downloading from the website https://code.visualstudio.com/docs/?dv=win

-> you can operate it by using the view ->integrated terminal

->this terminal is used to run the npm environment and with windows command prompt

-> this is can be done with the help of git bash shell also, Now we have to integrate the terminal with git bash instead of terminal(windows command prompt).

-> you can got to settings shown below  left corner

-> It shows the  default settings and user settings(CUSTOMIZATION).

-> go to "terminal.Integrated.shell.windows" in default settings

->set this property in user settings

"terminal.Integrated.shell.windows": " C:\\Program Files\\Git\\bin\\bash.exe"

-> then save it and close the window

->Now you can close the visual studio code and reopen it

->open the Integrated terminal

HOW TO OPEN THE NEW ANGULAR APPLICATION

->using the command ng new AngularHelloworld  you can open the new angualar 5 application

-> It takes few minutes to load the packages  of the npm

-> Now you can open the folder of the AngularHelloWorld  by browsing it in the openfolder

How  To build and  run the Angular Application

vamsee@Vamsee MINGW64 ~/AngularHelloworld (master)

$ ng build

Date: 2018-03-09T07:21:44.980Z

Hash: dfe79eb6f8fc4073635f

Time: 30127ms

chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 3.89 kB [entry] [rendered]

chunk {main} main.bundle.js, main.bundle.js.map (main) 7.46 kB [initial] [rendered]

chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 203 kB [initial] [rendered]

chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 14.5 kB [initial] [rendered]

chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.44 MB [initial] [rendered]

vamsee@Vamsee MINGW64 ~/AngularHelloworld (master)

$ ng server --open

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

 11% building modules 12/15 modules 3 active ...\webpack-dev-server\client\overlay.jswebpack: wait until bundle finished: /

Date: 2018-03-09T07:23:13.237Z

Hash: c5aef3579f7c8da106cb

Time: 21537ms

chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered]

chunk {main} main.bundle.js (main) 18 kB [initial] [rendered]

chunk {polyfills} polyfills.bundle.js (polyfills) 549 kB [initial] [rendered]

chunk {styles} styles.bundle.js (styles) 41.5 kB [initial] [rendered]

chunk {vendor} vendor.bundle.js (vendor) 7.42 MB [initial] [rendered]

webpack: Compiled successfully.

RESULT: