Learn Angular - Pre-Requisites Skills & Environment Setup

#Introduction

Welcome to the Learn Angular series! This series will take you from the conceptual foundations all the way to production readiness, helping you master Angular — a complete and opinionated TypeScript frontend framework for building enterprise web applications. There are 24 episodes in total, organized into six phases.

Before creating your first Angular project, there are a few foundational skills and pieces of software you must have. Why do these pre-requisites matter? Because Angular isn't just a rendering library — it's a framework that brings an entire ecosystem with it: a compiler, a router, forms, an HTTP client, and CLI tooling. Without a solid foundation, all of that feels like a black box.

Episode 0 is your roadmap: confirming your foundational skills, setting up Node.js and the Angular CLI, choosing an editor, and running a first verification. Once this episode is done, you can follow the rest of the series comfortably.

#Foundational Skills You Must Master

#HTML, CSS, and Modern JavaScript

Angular builds components from HTML and CSS, while the logic is written in TypeScript, a superset of JavaScript. You need to be comfortable with semantic HTML5, CSS flexbox and grid, and modern ES6+ JavaScript syntax such as arrow functions, destructuring, spread, template literals, and async/await.

Basic ES6+ syntax

const nama = 'Angular';
const versi = 19;
const aplikasi = { nama, versi };
const [utama, ...sisa] = [1, 2, 3, 4];
const pesan = `Memakai ${aplikasi.nama} versi ${aplikasi.versi}`;
const cetak = async () => console.log(pesan);

The code above uses destructuring, spread, and template literals, all of which you'll see repeatedly across any Angular codebase. If any of these features feel unfamiliar, study them first, because they're used in almost every component.

#TypeScript Basics, Modules, and Classes

TypeScript adds static types on top of JavaScript. Angular uses TypeScript throughout, so you need to understand basic types, interfaces, classes, access modifiers, and the module import/export system. Without this understanding, compiler errors will be hard to make sense of.

TypeScript class and interface

interface Produk {
  id: number;
  nama: string;
  harga: number;
}
 
class Keranjang {
  private items: Produk[] = [];
 
  tambah(p: Produk): void {
    this.items.push(p);
  }
}

An interface defines the shape of data, while a class wraps behavior. This is exactly the pattern you'll use for Angular data models and services later, complete with framework decorators.

#Component-based UI and Reactive Programming

Angular views an application as a collection of components — units that hold the view, styles, and logic in one place. You should also understand the reactive programming pattern: applications react to streams of data asynchronously. In Angular, these streams are usually represented by RxJS Observables, which we'll start covering in episode 4.

#Command Line, Git, and Package Manager

The Angular CLI is the primary tool, so being comfortable with a terminal is a hard requirement. Also master Git for version control and npm as the default package manager. If your organization uses yarn or pnpm, the concepts are the same — only the install commands differ.

git --version

The output should show Git version 2.x or newer. After that, make sure you're comfortable with your terminal, since almost every step in this series happens on the command line.

#Software to Prepare

#Node.js LTS

Angular 19 requires Node.js version 18.19 or higher, and version 20 LTS or 22 LTS is strongly recommended. Node.js provides the JavaScript runtime the Angular CLI uses to run builds, the dev server, and tests. Don't use a version that's too old, or builds will fail.

node --version
npm --version

Make sure node --version shows 20.x or 22.x and npm --version shows 10.x or newer. If not, install Node.js LTS from the official site or through your operating system's package manager.

#Angular CLI

The Angular CLI is the official command line interface for creating, building, and managing Angular projects. Install it globally:

npm install -g @angular/cli

Wait until the process finishes. Then verify the version:

ng version

The ng version command shows the Angular CLI version, the Node.js version, and the active package manager. Note the version numbers — you'll compare them when running ng new in episode 3. All examples in this series assume Angular version 17 or higher.

#Editor, Browser, and Hardware

VS Code is the most popular choice for Angular. Install the Angular Language Service extension so autocomplete, template navigation, and error diagnostics work directly in the editor. A modern browser such as Chrome, Firefox, or Edge is required for development, along with the Angular DevTools extension we'll use in episode 15. For hardware, Windows, macOS, or Linux with at least 8 GB RAM — 16 GB is strongly recommended because builds are fairly heavy.

#Environment Verification

Before moving on to episode 1, run a complete verification to make sure everything is ready:

node --version
npm --version
git --version
ng version

If all four commands run without errors, your environment is ready. For projects where you don't want to install the CLI globally, use the npx ng version form, which runs the CLI from the project's node_modules.

One important note: every subsequent episode uses Angular version 17 or higher with standalone components as the default. If you use a different version, the syntax may differ slightly, but the foundations we cover remain the same.

#Wrap Up

Key takeaways:

• Master HTML, CSS, and modern ES6+ JavaScript before touching Angular.
• Understand the TypeScript basics: types, interfaces, classes, and modules.
• Node.js LTS version 20 or 22 is the main pre-requisite for the Angular CLI.
• Install the Angular CLI globally and verify it with ng version.
• Use VS Code with the Angular Language Service for the best experience.
• Your environment must pass the full verification before moving on to the next episode.

In the next episode, episode 1, we'll cover history, background, and why you need Angular — from the birth of AngularJS in 2010, the complete overhaul into modern Angular, to its position in large-scale enterprise applications. Make sure your environment is ready, because the Learn Angular journey is just beginning!