Getting up and running with Angular Web App Development

Angular Web App Development. Now that we have our environment all set up, we can start installing Angular Essentials which include Angular CLI (Command Line Interface).

You can open up Git Bash terminal or node.js command prompt and use the following command:

npm install -g @angular/cli

It will take a few minutes to install, till then lets discuss the command we used and why we need Angular CLI.

The first ‘npm’ denotes the node package manager we previously installed.

This node package manager is used to download all kinds of packages. It is just like play store or app store on your phone.

‘install’ command is similar to install button on your play store or app store which you want to download. ‘-g’ denotes global installation of the package so that it can be accessed from anywhere in the system and finally ‘@angular/cli’ is the package name we want to install.

After completing the installation, you can see confirmation message.

@angular/cli@7.3.4
added 295 packages in 155.311s

One final point: The Angular CLI version installed is 7.5.3.
Now we are ready to use angular CLI to create our first app.
Im just going to quickly create a directory for us to work in named AngularProjects and change directory into it.

And now for the fun part, use the following command and let Angular CLI do the rest.

ng new firstAngularApp
Angular Web App Development

In my case, I got this error. Not to worry. If it works for you then great, if it doesn’t then open up node.js command prompt and hit those two commands again.

It will ask you some questions to get your app ready.

Say yes to routing and choose your preferred styling language. I chose css. Then let Angular CLI work its magic which can take some time. After its done, we can see a new folder has been made. Change directory into the new folder and we are ready to run our first Angular project.

cd firstAngularApp
ng serve -o

here ‘ng serve’ means we are running our angular and by default it will run on 4200 port of our localhost. ‘-o’ stands for open in browser which should open a tab in your browser directly.

Congratulations! You have successfully launched your first Angular app!

Also checkout this tutorial Intro to Angular and VS Code.