Build your first application with Angular 8

Keerthika Mahendralingam
Nov 8 · 3 min read

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 node

You 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/cli

Using 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 myFirstApp

This 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 serve

After 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 9001

The above command would change the URL you open in your browser to something like: http://localhost:9001.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade