Home / Angular / Angular project Setup Step by Step Practical Tutorial

Angular project Setup Step by Step Practical Tutorial

Last updated on April 1st, 2024

Setting up an Angular project involves several steps, but with the Angular CLI (Command Line Interface), the process is streamlined. Step-by-step tutorial on how to set up an Angular project using Angular CLI with practical examples.

What is Angular CLI?

Angular CLI stands for Angular Command Line Interface. It is a tool provided by angular team. There is a need for additional tool because angular code doesn’t directly run in browser. It needs to be converted and optimize since you will use angular features that are not native JavaScript features. It includes build step to convert angular code that you write during development to native code that runs in browser.

The CLI automates a wide range of tasks, from project creation and configuration to development, testing, and deployment.

Here are some of the key uses of the Angular CLI.

  • Create new Angular projects
  • Generate application features
  • Local development server
  • Live reload
  • Unit and end-to-end testing
  • Deploy commands
  • Adding libraries
  • Build optimization etc

Prerequisites Install Node.js and npm

In order to install and use Angular CLI you need to have Node JS install on your system. Angular CLI uses Node JS under the hood, so you need to install Node JS before using CLI.

Visit Node.js (nodejs.org) to download LTS or current Version. It is available for all operating system. Walk through the installer to install Node JS on your system. If you are a Windows and MacOS user, then no need to install npm additionally. It will be installed automatically with Node.js. However, if you are a Linux user then you will have to install that using the command prompt.

once you have Node JS installed you are ready use angular CLI.To check the Node JS version, you can open the terminal and hit the below command.

node --version

This will return latest version of Node JS installed on your machine.

Install Angular CLI

Open your terminal or command prompt and execute below command to install Angular CLI globally.

npm install -g @angular/cli

After installation verify version of angular CLI using below command

ng version

Angular CLI latest

It will return Angular CLI version along with other configuration.

Create the Very First Project in Angular 17

Once the setup is complete, you can create a new Angular project by opening your terminal and running the following command:

ng new my-angular-project --no-strict --standalone false --routing false

If you have project name with multiple words separate it by dash and not by spaces.

The --strict flag enables strict type checking options, improving maintainability and helping catch bugs earlier.

The --routing=false option indicates that the Angular routing module should not be included in the project setup.

The --standalone flag configures the project for standalone components, allowing components and modules to be bootstrapped without the need for an NgModule.

You will be prompted to choose the language or method for styling. Please select CSS and then continue to the next instruction.

CSS Set up in Angular Project

In the latest version of the CLI, you will be inquired whether you wish to activate Server-Side Rendering and Static Site Generation.

Disable Server Side Rendering

Opt out by typing ‘n’ and pressing enter.

Hit enter and new project will be created.

Angular Project Set up

Running your new Angular Project

Navigate to the newly created project folder by using the cd command. Then, start a development server to preview your Angular application by executing the following command.

ng serve

Angular Build

This action initiates a development server that is accessible at this http://localhost:4200/ address. The default port for the development server is 4200 You can terminate the server at any time by pressing Ctrl + C. Note that the server and your application preview will remain active only as long as the ng serve command is running. To observe changes to your application in real-time, keep the server running while you make modifications.

You can then visit http://localhost:4200/ in your web browser to see your application’s interface. Keep in mind that the appearance may vary depending on the Angular version you are using.

Angular Home Page

The ng serve command automatically detects changes to your files and refreshes the page accordingly, allowing for a streamlined development experience.

FAQ: Angular Project and Environment Set Up

What do I need to start an Angular project?

To start an Angular project, you’ll need Node.js and the npm package manager installed on your computer. Angular requires Node.js for its runtime and npm for managing project dependencies. Once these are installed, you can use the Angular CLI (Command Line Interface) to create, manage, and build Angular projects.

How do I install the Angular CLI?

You can install the Angular CLI globally on your machine using npm with the following command: npm install -g @angular/cli. This command installs the Angular CLI, making it available for use anywhere on your system.

How can I serve my Angular project locally?

Navigate to your project folder using the cd project-name command, then start the development server by running ng serve. This command compiles the application and launches a web server. You can view your application by visiting http://localhost:4200/ in your web browser.

How can I update my Angular CLI and Angular framework to the latest version?

To update the Angular CLI, use the command npm install -g @angular/cli@latest. For updating the Angular framework within your project, use the command ng update @angular/core @angular/cli.

Scroll to Top