Build your first application with Angular 8

This post will be helpful for those who want to start with Angular for develop web applications. Here, I am going to explain how to create a web application using Angular CLI and Visual Studio Code.
Install Node.js
To get started with Angular, you’ll need to have Node.js installed. If you have not installed Node.js in your machine visit the website and download according to your OS. Download and install the latest version as per the configuration of your machine. You can use Homebrew to install Node.js on your Mac OS system. First update the Homebrew package manager index. Then you can install Node.js package in your MacOS system using the following command:
$ brew update
$ brew install nodeYou have successfully installed Node.js on your system. It will also install npm (node package manager) on your system. Next step is to make sure everything related to node is installed. To check the version of node and npm installed on your machine, run the following command in command prompt.
$ node -v
v12.11.1$ npm -v
6.12.0
Install Angular CLI
Next step is to install Angular CLI which is a command line interface that you can use to initialize, develop, scaffold, and maintain Angular applications. use following commands to install Angular CLI tool on your system globally.
$ npm install -g @angular/cliUsing the -g above command will install the Angular CLI tool globally. So it will be accessible to all users and application on the system. Angular CLI provides a command ng used for command-line operations. Let’s check the installed version of ng on your system.
$ ng — version
Create our first Application
Lets create our first application using following command:
$ ng new myFirstAppThis command creates and initializes a new Angular app that is the default project for a new workspace. To open up this project in Visual Studio Code, navigate to myFirstApp directory from terminal and use the command “code .”
Launch our application in browser
To launch the application and to start the web server run the following command
ng serveAfter running this command, you can see that it is asking to open http://localhost:4200 in your browser. So, open any browser on your machine and navigate to this URL. Now, you can see the following page.

Note that sometimes you may get the message saying “Port 4200 is already in use. Use ‘ — port’ to specify a different port”. This means that you already have another service running on port 4200. In that case you can either shutdown the other service or you can change port for running Angular application by providing — port command line argument.
$ ng serve —- port 9001The above command would change the URL you open in your browser to something like: http://localhost:9001.
