What Is Angular? Installing the CLI and Creating a New Project

Angular is a full front-end framework maintained by Google for building single-page applications with TypeScript — distinct from the older AngularJS (1.x), it's a complete rewrite with a component-based architecture, and the Angular CLI is effectively the standard way any real project gets built and structured.

What Angular actually is, compared to a library like jQuery or a smaller framework

Angular is opinionated and comprehensive by design — routing, HTTP client, forms handling, dependency injection, and build tooling all come built in and are meant to be used together, rather than being separately chosen third-party packages the way a lighter framework or library-based approach typically works.

Prerequisites: Node.js and npm

node --version
npm --version

Angular's tooling runs on Node.js — the CLI itself, the dev server, and the build process are all Node-based tools, even though the application code that ships to the browser is compiled TypeScript/JavaScript, not Node code itself.

Installing the Angular CLI globally

npm install -g @angular/cli

ng version

Creating a new project

ng new my-app

The CLI prompts for a few choices during setup — whether to add Angular routing, and which stylesheet format (CSS, SCSS, Sass, Less) to use — both of which can be changed manually later, but are easiest to get right at project creation time.

Running the development server

cd my-app
ng serve

This starts a local dev server (by default at http://localhost:4200) with live reload — changes to any source file are automatically detected, recompiled, and reflected in the browser without a manual refresh.

The generated project structure

my-app/
  src/
    app/
      app.component.ts
      app.component.html
      app.module.ts (or app.config.ts for standalone apps)
    index.html
    main.ts
  angular.json
  package.json

angular.json is the CLI's own project configuration — build targets, asset paths, and CLI-specific settings live here, distinct from package.json, which handles npm dependencies the standard way for any Node-based project.

Using CLI generators for common building blocks

ng generate component product-list
ng generate service product
ng generate directive highlight
ng generate pipe currency-format

These generators scaffold the boilerplate file structure (and, for components, register them where needed) for each building block covered elsewhere on this site — using them consistently is what keeps a project's naming and file organization aligned with Angular's own conventions.

Building for production

ng build --configuration production

The production build applies ahead-of-time (AOT) compilation, minification, and tree-shaking — meaningfully different output from the development build ng serve produces, which prioritizes fast rebuild times and readable debugging output over final bundle size.