AI Reading

Quick summary of this article

This guide walks beginners through installing Angular 20, setting up the development environment, and creating a first project. It covers the essential tools like Node.js and the Angular CLI, explains the key project files, and lists common commands for building, testing, and troubleshooting.

Angular 20 is Google's full-featured, TypeScript-based framework for building single-page applications, offering built-in routing, forms, and HTTP support.
Before installing Angular, you must download the LTS version of Node.js from nodejs.org, which also installs npm; verify with node -v and npm -v.
Install the Angular CLI globally with npm install -g @angular/cli, then create a new app using ng new my-first-app and run it with ng serve --open at http://localhost:4200.
Key folders include src/ for source code, app/ for main modules and components, and angular.json for CLI configuration; use ng generate to create components or services.
For production, build with ng build --configuration production; common fixes include adding npm's global bin to your PATH or using sudo for permission issues.

Angular 20 Installation and Setup

Angular 20 is the latest and most powerful release of Google’s frontend framework, offering improved performance, streamlined development, and standalone components support. This chapter will help you understand what Angular is, set up the development environment, and build your first Angular app step by step.

What is Angular?

Angular is a popular TypeScript-based frontend framework developed by Google. It allows developers to build single-page applications (SPAs) with a clean architecture and modular code. Unlike React or Vue.js, Angular is a full-fledged framework offering built-in routing, form handling, HTTP support, and dependency injection.

Key Features of Angular 20

Standalone components by default
Improved hydration and SSR performance
Faster rendering and build optimizations
Experimental Signals API for fine-grained reactivity
Improved developer tooling and diagnostics

Node.js and npm Setup

Angular relies on Node.js and npm to manage dependencies and run development tasks. Installing Node.js will also install npm.

Step 1: Download Node.js

Visit https://nodejs.org/ and download the LTS version. Install it using default options.

Step 2: Verify Installation

node -v
npm -v

Installing Angular CLI (v20)

Angular CLI is a command-line interface for creating and managing Angular applications.

Install Globally

npm install -g @angular/cli

Check Installed Version

ng version

Creating Your First Angular Project

Step 1: Create a New Project

ng new my-first-app

CLI will prompt for routing and CSS preferences. Choose options as needed.

Step 2: Navigate to Project Directory

cd my-first-app

Step 3: Serve the App

ng serve --open

This opens your app at http://localhost:4200 in the browser.

Understanding Angular File Structure

Let’s understand the structure of your Angular project:

e2e/: End-to-end test config
src/: Source code of the application
app/: Main module and components
assets/: Static files (images, JSON, etc.)
environments/: Configs for dev/prod
angular.json: Angular CLI configuration
package.json: Lists project dependencies

Running and Building Angular App

Development Server

ng serve

Build for Production

ng build --configuration production

Useful Angular CLI Commands

ng generate component xyz: Create component
ng generate service xyz: Create service
ng test: Run unit tests
ng lint: Lint your code
ng add @angular/material: Add Material UI

Troubleshooting Tips

Command Not Found

# macOS/Linux
export PATH=$PATH:$(npm bin -g)

# Windows
set PATH=%PATH%;C:\Users\YourName\AppData\Roaming\npm

Permission Issues

sudo npm install -g @angular/cli

Conclusion

In this tutorial, you’ve learned how to install Angular 20, set up the CLI, and create your first app. You also explored the folder structure and learned how to run and build the application. Angular 20’s modern features and tools will empower you to build scalable and high-performance web applications.

Next Steps

In the next chapter, we’ll explore Angular Components, Templates, and Data Binding. You’ll learn how to build UI with reusable components and bind them with dynamic data.

Chapter 1: Angular 20 Installation and Setup Tutorial – Step-by-Step Guide for Beginners