Setting up Angular Dev Machine Step by Step
Create your first project
- Installing nodeJs
- As we know Angular uses nodeJs to download all the dependencies. First we need to install one of the most useful dependency of the angular app development which is NodeJs package manager.
You can go to https://nodejs.org/en/download/ and download the latest version of NodeJs on your development machine configuration.
Once nodeJs is installed successfully, we will search for nodeJs command prompt which will allow us to fire npm related commands for package download and management. You can search it in your machine by using search box.
- Installing AngularCLI
- When open your command prompt in that particular folder. Now you will need to install Angular CLI in your machine and in order to do that you need to fire command
npm install –g @angular/cli .
- By firing this command angularCLI will installed in your whole machine as we have entered (g-global) in the command. If you don’t want to install angularCLI in your whole machine, then you can also install it in particular folder. In order to do that Use command npm install @angular/cli .
- Creating your first app
- After installing angularCLI, let’s create your very first app on angular. In order to do that open your command prompt in that particular folder. In my case the folder name is VRAJESHDEMO.
To create a new project, use command ng new ‘your project name’. Here my project name is ‘firstappvrjs’.
- After firing that command, it will ask you certain questions. The very first question it will ask about adding Angular routing. But, right now we don’t need Angular routing so we type Nso into that.
- Second question it will ask is about stylesheet format you would like to use. You can choose that from multiple options. We are using CSS to style our application so we will choose CSS as our stylesheet format which is default option.
- After answering both the questions hit enter. It will start installing all the packages that you need in order to make application in Angular. Installing will take some time.
- Running your first app
After it installs everything, use command ng serve to run your angular application.
- But, it will show you error like this if you fire command ng serve in your command prompt. Because you first need to go to your application to run your application.
- Use command cd ‘your project name’ to go to your application. And then fire command ng serve.
After firing command ng serve it will take some time to compile your Angular application. Just wait for some time.
You can see here it is asking you to open your browser on localhost:4200 as angular live development server is listening on localhost:4200. When you open your browser on http://localhost:4200/ it will look like this.
In case you have already opened one angular project in browser and you are trying to create another project then at the time of creating it fire command ng serve –port 4201 instead of ng serve.
- Why we need to do this? Because ‘localhost:4200’ is already occupied in different project. If you want to create and open new project, then you need to use different portal. Now you can open your project on http://localhost:4201/
- Installing Visual Studio code
- To develop and customize this application code we will use VS code as IDE and that’s why we will download and install latest version of Visual studio code from https://code.visualstudio.com/
After installing VS code let’s try to see the internal structure of this app by opening it in the IDE. Go to file menu in the VS code and choose open folder. Browse to the project folder and select open folder and select your project folder from your machine to get the same kind of structure you are seeing below.