Getting Started with Angular: Installing and Creating Your First Project

Angular is a powerful front-end framework for building web applications with TypeScript. Whether you're just starting out or returning to Angular after a break, setting up your development environment properly is the first step. This guide walks you through installing the Angular CLI and creating a new project tailored to your needs.

---

Installation

The Angular CLI (Command Line Interface) is the recommended way to start Angular development. It provides commands to generate components, services, and modules, and to build, test, and serve your application.

Install the Angular CLI globally using your preferred package manager:

Using npm:

npm install -g @angular/cli

Using pnpm:

pnpm install -g @angular/cli

Using yarn:

yarn global add @angular/cli

Using bun:

bun install -g @angular/cli

---

Installing a Specific Version

If you need a specific Angular CLI version, replace version-number with your desired version:

npm install -g @angular/cli@version-number

---

Updating Angular CLI

To update to the latest version:

npm install -g @angular/cli@latest

---

Verifying Installation

To verify that the CLI is installed and to check the version:

ng version

---

Creating a New Angular Project

You can create a new Angular project using the ng new command. Replace [PROJECT NAME] with your desired project name.

Basic command:

ng new [PROJECT NAME]

With options:

• Without standalone components (Angular v17+):

    ng new [PROJECT NAME] --standalone=false
  

• Without routing:

    ng new [PROJECT NAME] --routing=false
  

• Without testing setup:

    ng new [PROJECT NAME] --skip-tests=true
  

• Without installing dependencies:

    ng new [PROJECT NAME] --skip-install=true
  

• Without Git initialization:

    ng new [PROJECT NAME] --skip-git=true
  

• With experimental zoneless mode:

    ng new [PROJECT NAME] --experimental-zoneless
  

Note: Standalone components were introduced in Angular v14 and became the default in Angular v17. Use the --standalone flag to toggle this behavior during project creation.

---

Running Your Application

After your project is created, navigate to the project directory:

cd [PROJECT NAME]

Then start the development server:

ng serve

Open your browser and go to: http://localhost:4200

---

Conclusion

With the Angular CLI installed and your first project created, you're now ready to dive into building modern web applications with Angular. Stay tuned for more posts exploring components, routing, services, and beyond!