Setting Up an Angular Project with Angular CLI

The Angular CLI is the official command-line tool for creating, developing, building, and testing Angular applications.

Installation

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

# Verify installation
ng version

Create a New Project

ng new my-app
# Prompts: routing? (yes)  stylesheet format? (CSS/SCSS)

cd my-app
ng serve         # starts dev server at http://localhost:4200
ng serve --open  # opens browser automatically

Project Structure

my-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts     # root component class
│   │   ├── app.component.html   # root component template
│   │   ├── app.component.scss   # root component styles
│   │   └── app.config.ts        # standalone app configuration
│   ├── assets/                  # static files
│   ├── index.html               # main HTML shell
│   └── main.ts                  # bootstrap entry point
├── angular.json                 # CLI workspace config
└── tsconfig.json

Useful CLI Commands

ng generate component user-list   # create a component
ng generate service   auth        # create a service
ng generate pipe      date-format # create a pipe
ng build --configuration=production
ng test              # run unit tests with Karma/Jest
ng lint              # run ESLint