You are currently viewing Set Up Your Angular Environment

Set Up Your Angular Environment

Recently Angular 8 has been released. I wanted to setup Angular on my machine to update myself on the latest features of Angular. Hence setting my developer machine with all the required tools. This is a short blog post for those who are new to Angular and want to setup Angular developer environment.

Please note that these steps are valid today, not sure if they will be valid for future Angular versions. I would recommend to refer the Angular documentation if you want to learn most updated setup steps. The same site also have comprehensive documentation on Angular which will help you to get started.

Before we start !

Please note that setting up the Angular dev environment is two step process:

  • Install NPM
  • Setup an angular application

The second step is very long step and may involve a lot of different steps if you are setting up new application. That’s why most of developers prefer using Angular CLI which automates most of these manual steps and you just need to fire a command from command prompt.

This article helps to install NPM and helps you to create your first new Angular application using CLI.

The NPM

First step, is you need to get NPM (Node Package Manager). This is a command line utility to install javascript libraries, packages and applications along with their dependencies. Minimum NPM version which is required by Angular is 5.5.1.

You can install NodeJS from this location. This will install NPM on your machine. After installing node.js, you can quickly check that NPM command prompt is available by searching “Node.js Command Prompt” in the windows start menu. Minimum NPM version which is required by Angular is 5.5.1. You can check the npm version by running below command on the NPM command prompt


npm -version

The CLI

Once NPM is installed, start the Node.JS command prompt. On the command prompt, type below command. This command will install all the required packages for Angular. 


npm install -g @angular/cli

Time for your first app

Now that you have Angular CLI, you can run below command to create a new Angular app. This command creates a new directory with app name provided in the command (in this case “my-first-app”).

When you run this command, command line asks two questions:

  • Would you like to add Angular routing ? I selected Yes to continue.
  • Which style-sheet format would you like to use ? There were four options and I could select any one of them using arrow key. I selected the default (i.e. CSS).

ng new my-first-app

Inside this directory, a complete folder structure is created. Below snapshot shows all the files created for me. These files include a module with name app and its components and templates and other things.

Running the app

From your current directory, you need to switch to the application’s directory (in our case it is my-first-app). Then use ng serve command. 


cd my-first-app
ng serve --open

Voila…

This command will open a browser and will serve the application on 4200 port on localhost. The default application does not have anything – it has angular logo and link to Angular documentation.

Now you can continue editing this application by deleting existing modules and adding modules one by one in this application. Once enough pages are ready, you can also start on server side APIs and see your data getting persisted.

I hope this article provides you guys enough information to get you started on Angular and Node. Please do comment and let me know your thoughts.

Tags: , , ,