The Angular Guide — 2: Project Setup and Angular CLI | JuniorDev

In the previous blog we’ve learnt about What Angular is, Why we are learning it and the different versions of Angular. Now let us learn How to work with Angular in this blog.

Setting up the Angular Project

In order to setup an Angular project we will first need to install Angular CLI.

Angular CLI is an official Command Line Interface for Angular, it provides us with very useful commands which we can use to create a new application, generate library code and also perform development tasks like testing, bundling, optimization and it even has a server so we can build and serve our code locally.

If you are getting overwhelmed by terms like bundling, library code, etc… don’t worry. We will learn about Angular CLI in tiny chunks as we progress through this series, but for now understand that the CLI tool provides a quick and easy way to setup and build Angular projects.

Installing Angular CLI

• Step 0: If you already have Node.js and npm installed on your machine then proceed to Step 2, otherwise we will do that in Step 1.
• Step 1: Angular CLI uses Node.js (A server side programming language) behind the scenes to build and serve our angular app, so we must first install that, We will also install NPM which is a package manager that we will use to install and manage dependencies.

Simply download the latest version from here: Node + npm and run through the setup wizard to install Node and npm on your machine.

After installing open up the terminal and type the command $ node -v and
$ npm -v to check the version installed ( note: My version may vary with yours but it will work just fine )

$ node -v
v12.18.2
$ npm -v
6.14.5

• Step 2: Now that we’ve met the requirements, we can now install Angular CLI in our machine. Open the terminal and type the command :

$ npm install -g @angular/cli 

This will install the latest version of Angular CLI globally in your machine, If you are facing errors with permission then try

• Adding sudo in front of the command if you have a mac or linux machine.
• Run terminal (Command Prompt) as an Admin if you are on windows machine.

After that’s done, try running $ ng --version to check the version of Angular CLI that’s installed

$ ng --version
Angular CLI: 11.0.3
Node: 12.18.2
OS: win32 x64
Angular:
...
Ivy Workspace:
Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1100.3 (cli-only)
@angular-devkit/core         11.0.3 (cli-only)
@angular-devkit/schematics   11.0.3 (cli-only)
@schematics/angular          11.0.3 (cli-only)
@schematics/update           0.1100.3 (cli-only)

And that’s it, Angular CLI is now installed. Here’s a quick Cheatsheet for the CLI, you can use it to get a quick understanding of some of the most common commands that we will use.

Creating Angular Project

We now have all the tools necessary to create our first Angular project. Now let’s create the app itself.

1. Open terminal and move to the folder in which you want to create the Angular app.
2. We can now use Angular CLI to create our Angular application, for that we use the command $ ng new <name-of-the-app> ( replace <name-of-the-app> with the proper name of your application, I’m going to call it
   my-app )
   ng new also comes with several options, you can read more about them from here. We will use one of it’s options and set defaults to true.

$ ng new my-app --defaults

3. After it’s done, navigate inside of the project folder that is created
$ cd my-app and run $ ng serve this will run the development server for our application. ( you can learn more about ng serve from here )

4. Open up your favorite web browser and go to this site http://localhost:4200

You will see something like this on the browser:

( Note: This is the landing page for angular at the time of writing this blog, this maybe changed in the future, but as long as you see some thing show up on your browser which is not an error then it means the project setup worked )

We now have a base code setup for our Angular project, In the next blog let’s build upon this base and learn about Components and Data binding in Angular.