Angular Environment Setup - Learn Angular | BigXStar

Prerequisites

Before setting up Angular, make sure you have:

Node.js (version 18.x or later) — Angular requires a modern Node.js runtime
npm (comes with Node.js) or yarn as a package manager
A code editor — Visual Studio Code is recommended for the best Angular experience

Step 1: Install Node.js

Download and install Node.js from the official website:

👉 https://nodejs.org

Choose the LTS (Long Term Support) version for stability.

After installation, verify in your terminal:

bash

node --version
# v20.x.x

npm --version
# 10.x.x

Step 2: Install the Angular CLI

The Angular CLI (Command Line Interface) is the official tool for creating, developing, and managing Angular projects.

bash

npm install -g @angular/cli

Verify the installation:

bash

ng version

You should see output similar to:

Angular CLI: 19.x.x
Node: 20.x.x
Package Manager: npm 10.x.x

Step 3: Create Your First Project

Use the CLI to generate a new Angular application:

bash

ng new my-first-app

The CLI will ask you several questions:

Prompt	Recommended Choice
Which stylesheet format?	CSS (or SCSS if you prefer)
Enable Server-Side Rendering?	No (for now)

The CLI creates a project directory with all necessary files and installs dependencies automatically.

Step 4: Run the Development Server

Navigate into your project and start the dev server:

bash

cd my-first-app
ng serve

Open your browser and visit:

http://localhost:4200

You should see the default Angular welcome page. The dev server supports hot module replacement — changes you make are reflected instantly in the browser.

Step 5: VS Code Extensions

For the best development experience, install these VS Code extensions:

Extension	Purpose
Angular Language Service	Autocomplete, error checking in templates
ESLint	Code linting
Prettier	Code formatting
Angular Snippets	Code snippet shortcuts

Useful CLI Commands

Here are the most common Angular CLI commands you'll use:

bash

# Create a new component
ng generate component my-component
# Shorthand: ng g c my-component

# Create a new service
ng generate service my-service

# Create a new module
ng generate module my-module

# Run unit tests
ng test

# Build for production
ng build

# Run lint checks
ng lint

Project Configuration Files

File	Purpose
`angular.json`	Workspace and project configuration
`tsconfig.json`	TypeScript compiler configuration
`package.json`	Dependencies and scripts
`.editorconfig`	Editor formatting rules

Troubleshooting Common Issues

Permission Errors on npm Install

bash

# Use npx instead of global install
npx @angular/cli new my-app

# Or fix npm permissions
npm config set prefix ~/.npm-global

Port Already in Use

bash

# Use a different port
ng serve --port 4300

Node Version Mismatch

bash

# Use nvm to manage Node versions
nvm install 20
nvm use 20

Next Steps

With your environment set up and a running application, you're ready to explore the Angular project structure and understand how all the pieces fit together.