Your First Angular 20 Project: Step‑by‑Step for Absolute Beginners

July 13, 2025

This content originally appeared on DEV Community and was authored by Preethi R

Getting Started with Angular 20 from Scratch (Beginner-Friendly Guide)
Welcome, future Angular dev! Whether you’re just starting out or coming from another framework, this guide will walk you through creating your first Angular 20 app step by step.

Angular 20 (released in 2025) brings in cleaner architecture, standalone components by default, and improved dev experience — making it a great time to dive in.

Step 0: What You Need Before Starting
Before you begin, make sure you have the following installed on your machine:

1. Node.js (v18 or later)

Node.js is a powerful tool that lets you run JavaScript code outside the browser — right on your computer. It’s like having a mini JavaScript engine that can do things like install packages, run development servers, and build your projects.

Why is Node.js important for Angular?
Angular’s tools (like the Angular CLI) rely on Node.js to run commands and manage all the packages your app needs to work. Without Node.js, you wouldn’t be able to create, build, or run your Angular apps.

How to check if Node.js is installed:
Open your command-line tool and type:

node -v

If you see a version number (like v18.16.0), Node.js is installed. If not, download and install it from nodejs.org.

Simple Node.js example:
Open your command line and type:

node

This opens the Node.js interactive shell. Now type:

console.log("Hello from Node!");

Hit Enter, and you’ll see:

Hello from Node!

This shows Node.js running JavaScript directly on your machine!

2. Bash (Command Line Interface Basics)

Bash is a type of command-line interface (CLI) or “shell” where you type commands to interact with your computer — like creating folders, running programs, and more. It’s commonly used on Linux and macOS.

On Windows, you have several options:

PowerShell (Windows’ own CLI)
Command Prompt (cmd.exe)
Git Bash (which gives a Bash-like experience on Windows)

Using Bash or a similar terminal helps you run commands like installing Node.js packages or starting your Angular app.

Example of Bash commands:

To check your current folder:

pwd

To list files in the folder:

ls

To change folders:

cd my-folder

These are basic commands you’ll use frequently when working with Angular.

3. Angular CLI (Command Line Interface)

Angular CLI is a command-line tool that helps you quickly create and manage Angular projects.

To install Angular CLI globally on your machine, run:

npm install -g @angular/cli

Then check the installation:

ng version

You should see Angular CLI version 20.x.x.

Step 1: Create a New Angular Project
Generate a new Angular app by running:

ng new my-angular-app

You’ll be asked:

Do you want to add Angular routing? (Say Yes if your app has multiple pages)
Which stylesheet format do you want? (Choose CSS for simplicity or SCSS/SASS if you prefer)

After this, Angular CLI will set up the project files.

Project Folder Structure (Simple Breakdown)
Inside my-angular-app, you’ll see:

src/
  app/
    app.component.ts      --> Main component logic
    app.component.html    --> Main component view
    app.component.css     --> Styles for the component
  index.html              --> HTML entry point
  main.ts                 --> Main TypeScript entry point
angular.json              --> Angular config
package.json              --> List of installed packages

Angular 20 uses standalone components by default — meaning your components are more modular and easier to manage (no need for NgModule in simple cases ).

Step 2: Run Your Angular App Locally
Change into your project folder:

cd my-angular-app

Start the development server:

ng serve

Open your browser and go to:

http://localhost:4200

You’ll see the Angular welcome page — your app is running live on your machine!

Step 3: Create Your First Component
Add a new Welcome component with:

ng generate component welcome --standalone

This creates:

welcome/
  welcome.component.ts
  welcome.component.html
  welcome.component.css

Use this component by adding:

<app-welcome></app-welcome>

inside app.component.html.

Note: Using --standalone means the component works independently without needing to be registered in a module. This is the new best practice in Angular 20.

Quick Tips for Beginners

Angular uses TypeScript — a strongly typed JavaScript variant.
Components consist of:
- HTML (view)
- CSS (styles)
- TypeScript (logic)
Use Angular CLI commands like ng generate, ng serve, and ng build.
Everything in Angular is component-based.
For apps with multiple pages, explore Angular Router.

What’s New in Angular 20?
Standalone components by default (less boilerplate)
Faster build performance
Better accessibility and default styling
Improved tooling with strict typing & default configs
Simplified testing setup