⚙️ Install Angular

? Quick Overview

Before you start building Angular applications, you must set up the development environment. Angular requires Node.js, npm (Node Package Manager), and the Angular CLI. The overall setup steps are almost the same for both Windows and macOS.

First, you install Node.js (which automatically installs npm), then you install the Angular CLI globally, and finally you create and run your first Angular project.

? Step 1: Install Node.js & npm ?️ Step 2: Install Angular CLI ? Step 3: Create & Run Project

? Key Concepts

Node.js – JavaScript runtime required by Angular tools.
npm – Node Package Manager used to install Angular CLI and other libraries.
Angular CLI – Command Line Interface to create, build, and run Angular apps.
Global Installation – Installing Angular CLI with -g so it is available in any folder.
Development Server – Runs your app locally at http://localhost:4200.

? Syntax & Theory

Angular provides a command-line tool called Angular CLI that simplifies project setup and development. Some important commands:

npm install -g @angular/cli – Installs Angular CLI globally.
ng new <project-name> – Creates a new Angular project.
cd <project-name> – Moves into the project folder.
ng serve – Starts the local development server.

Using the CLI ensures that your project follows Angular’s recommended structure and includes all necessary configuration files from the beginning.

? Step 1: Install Node.js & npm

Download and install the LTS (Long Term Support) version of Node.js from the official website. The installer will also install npm automatically:

? Download Node.js (LTS)

After installation, verify that Node.js and npm are installed correctly using the terminal or command prompt:

? View Code Example

# Verify Node.js and npm installation
node -v
npm -v

?️ Step 2: Install Angular CLI

Once Node.js and npm are installed, install the Angular CLI globally using npm. This makes the ng command available from anywhere on your system:

? View Code Example

# Install Angular CLI globally using npm
npm install -g @angular/cli

On macOS or Linux, if you face permission issues, you can run the command with sudo (you will be asked for your system password).

? Example: Create Your First Angular Project

After installing the Angular CLI, you can create a new Angular project and run it on the development server:

? View Code Example

# Create a new Angular project and start the dev server
ng new my-app
cd my-app
ng serve

? Live Output / Explanation

When you run ng new my-app, Angular CLI:

Creates a new folder named my-app.
Generates all required Angular files and folder structure.
Installs all npm dependencies listed in package.json.

After moving into the project using cd my-app and running ng serve, Angular compiles the project and starts a development server. You can open your browser and navigate to:

? URL: http://localhost:4200

You should now see the default Angular welcome page. Any changes you make in the source files will automatically reload in the browser.

? Tips & Best Practices

Always install the LTS version of Node.js for better compatibility with Angular.
Keep your Angular CLI updated with npm update -g @angular/cli.
On macOS or Linux, if you get permission errors, run the install command as: sudo npm install -g @angular/cli.
Ensure that Node.js and npm are added to your system PATH so that commands like node, npm, and ng are recognized in any folder.
Always run ng serve inside the Angular project folder (for example, inside my-app), not from a parent directory.

? Try It Yourself / Practice Tasks

Install Angular CLI and verify the installation using: ng version.
Create a new Angular project named hello-angular and run it locally using ng serve.
Inside your new project, generate a component using: ng generate component test and observe the files it creates.
Explore the files inside the src folder and identify where the root component is defined.