How to Create a new project in Angular

How to Create a new project in Angular

In this guide, I will share how to create a new project in Angular. To help us to create the app, Angular CLI should be installed on your machine. Angular has come a long way since its first version in Angular 2.

Table of Contents

The creation of a new project is now as simple as installing Angular CLI and running the ng new command. First, let us look into what really is Angular CLI.

What is Angular CLI

The Angular CLI helps us to quickly create an Angular application with all the configuration files and packages in one single command. It also helps us to add features (components, directives, services, etc) to existing Angular applications.

The Angular CLI creates the Angular Application and uses TypescriptWebpack ( for Module bundling), Karma ( for unit testing), Protractor ( for an end to end testing).

How to Create a new Angular project

Installing required software

Before starting with Angular, you need to set up your developer environment and install the required tools. Before going further install the following.

  1. Visual Studio Code (or any other editor of your choice)
  2. NPM Package Manager

Installing Angular CLI

The first step is to install the Angular CLI. We use the npm install command.

npm install -g @angular/cli@latest Code language: CSS (css)

The above command installs the latest version of Angular CLI on your machine.

Note that we have used the -g flag, (which stands for global) to install the Angular CLI system-wide so that you can use it in your all projects.

Finding the Angular CLI Version

You can find out the Current Installed Angular CLI Version by Using the Command.

ng --version 
Checking Angular CLI version

As of writing, the Angular CLI version is 12.1.1. The command above also gives the version of the node installed in your system which in my case is 14.17.3. 

You can check the release version of the latest Angular CLI from this link 

Creating a new Angular Application

The creation of your first Angular project has become very simple because of the handy Angular CLI. Open your CMD and run the following command.

ng new bhutanio Code language: JavaScript (javascript)

The above command will create a folder bhutanio and copy all the required dependencies and configuration settings.

Create a new Angular Project
Create a new Angular Project

The Angular CLI does the following

  1. Creates a new directory with name bhutanio
  2. Sets up the folder structure for the application
  3. Downloads and installs Angular libraries and any other dependencies
  4. Installs and configures TypeScript
  5. Installs and configures Karma & Protractor for testing
Angular Project Structure
Angular Project Structure

To understand more about the project structure of an Angular project, refer to: Understanding Angular Project Structure.

Running your new Angular Project

To run your application all you need to do is type the following command

ng serve

The above command compiles the Angular application and invokes the Webpack development server. The server keeps a watch on our project folder. If you make any changes in the code, it compiles the project again.

By default, the Webpack Development server listens on HTTP Port 4200. Hence open the browser and type http://localhost:4200/.

If everything gets successful, you will see bhutanio app is running displayed on the browser. The Angular starter project looks something like this:

Angular Starter Project

Leave a Reply

Discover more from BHUTAN IO

Subscribe now to keep reading and get access to the full archive.

Continue reading

Scroll to Top