Angular Development Workspace Setup

Learn to setup the development environment for Angular, Node and TypeScript in your local workstation to develop next generation UI applications.

Table of Contents

Install Node
Install Git
Install Packages
Create Angular Hello world
Demo

Install Node

  1. Goto Node download page and download the installer based on your machine configuration.
  2. Execute the installer. Choose the paths if you want to install node on any alternate location. I will recommend to go with default options.
  3. Verify that node has been installed with this command.
    $ node --version
    
    v8.11.3		//output
    

Install Git

  1. Goto Git download page and download the installer based on your machine configuration.
  2. Execute the installer. Choose the paths if you want to install node on any alternate location. I will recommend to go with default options.
  3. Verify that node has been installed with this command.
    $ git --version
    git version 2.17.1.windows.2	//Output
    

Additionally run these commands to set your git identity.

$ git config --global user.email "you@example.com"	//Use your git email id
$ git config --global user.name "Your Name"			//Use your git name

Install Packages

Now when node and git are installed, it’s time to install necessary npm packages.

$ npm install -g rxjs
$ npm install -g typescript
$ npm install -g webpack
$ npm install -g webpack-cli
$ npm install -g @angular/core
$ npm install -g @angular/cli
$ npm install -g gulp

Create Angular Hello world

Go to your workspace in command prompt, and run this command. This command will create a new Angular application in helloworld folder – with all necessary files in it.

$ ng new helloworld
Angular CLI Generated Files
Angular CLI Generated Files

Demo

To run the above created application, run command ng serve from application folder.

$ cd helloworld

$ ng serve

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

Date: 2018-06-18T17:10:50.638Z
Hash: 832b348b3a35e13efaf8
Time: 6365ms
chunk {main} main.js, main.js.map (main) 10.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.06 MB [initial] [rendered]
i 「wdm」: Compiled successfully.

Open browser and verify the running application in http://localhost:4200/.

Angular Hello World in Browser
Angular Hello World in Browser

Your Angular development environment is UP and running.

Drop me your questions in comments section.

Happy Learning !!

Was this post helpful?

Join 7000+ Fellow Programmers

Subscribe to get new post notifications, industry updates, best practices, and much more. Directly into your inbox, for free.

Leave a Comment

HowToDoInJava

A blog about Java and its related technologies, the best practices, algorithms, interview questions, scripting languages, and Python.