How to Setup the development environment for Angular ??
Are u new to Angular ?? Wanna develop amazing applications with it?? But struggling how to get started ?? If you answered yes to any of these questions…this article is for you.
If you are still with me , I’ll assume you are new to angular and here are the steps to install angular successfully and to finally run your first angular application.
To set up a local Environment for Angular
all you need is:
- Browser
- NodeJs
- AngularCLI
- Code Editor
Step 1: Browser
Usually, all the latest pc’s are provided with a browser . If not, Install the latest version of Google Chrome or Mozilla Firefox.
Step 2: Install NodeJs
Install the latest version of Long Term Support(LTS) according to your Operating System and type of your CPU Architecture.
Once you have downloaded and installed nodeJs that comes with npm,to confirm it , Open command prompt and check the versions of nodeJs using the commands:
node -v
npm -v
which gives the version of nodeJs installed on your machine, make sure it is the latest version and the screen looks like this.
Step 3 : Install AngularCLI
Great !!! Now you have Node.js and npm on your machine and its time to install Angular CLI .
Open Command Prompt and follow the below command to install Angular CLI globally.
npm install -g @angular/cli
or if u want to install it locally , use the command:
npm install @angular/cli
To confirm whether it is installed successfully or not lets check the version of by the typing
ng -v
Step 4 : Code Editor
Visual Studio Code , Brackets , Atom …these are few recommended code editors for developing angular applications
To install Visual Studio Code — click here
To install Brackets — click here
To install Atom — click here
To run angular applications online , use any online IDE like StackBlitz
Finally , to develop any application, create a workspace using the angular CLI command:
ng new my-app
This take a few minutes to install necessary packages and now , CLI creates the angular workspace and an sample application which is ready to run.
Opt Yes for allow routing and choose CSS or any other style sheet
And the screen appears like this..
Now run the following command to execute your application
ng s -o
and Since we haven’t made any changes in the application , it gives the following output by automatically opening your browser to http://localhost:4200/
Perfect!!! Now we are done with installations part and undoubtedly , you can learn … practice …and develop amazing angular applications .
This brings us to the end of this blog , if you find it helpful give a clap and share it to your friends who are new to Angular.
