Setting Up an Angular Project

Analogy categoryAnalogies

Starting a new Angular application begins with the Angular CLI, a command-line tool that scaffolds a working project with sensible defaults for TypeScript configuration, build tooling, testing, and linting. Rather than manually wiring together a bundler, a TypeScript compiler, and a dev server, you install the CLI globally (or use it via npx) and run a single command that generates a ready-to-run application. This section walks through the practical steps and the decisions the CLI presents along the way.

🏏

Cricket analogy: Starting a new Angular app with the CLI is like a franchise using a professional academy's standard setup — nets, kit, coaching staff — instead of assembling training facilities from scratch, letting the team start playing matches immediately.

Installing the CLI and Creating a Project

The CLI is distributed as the @angular/cli npm package. You can install it globally with npm, or invoke it on demand with npx without a global install, which is useful in CI environments or when different projects need different CLI versions. Running ng new triggers an interactive prompt asking about stylesheet format (CSS, SCSS, Sass, or Less), whether to enable Server-Side Rendering (SSR), and whether to include routing. As of Angular 17+, newly generated applications default to standalone components and the esbuild/Vite-based application builder for faster builds and rebuilds.

🏏

Cricket analogy: Choosing ng new's prompts — stylesheet format, SSR, routing — is like a captain at the toss deciding pitch strategy, whether to play an extra spinner, and batting order before a ball is bowled, with Angular 17+ defaulting to the modern standalone, esbuild-powered setup like a team defaulting to an aggressive top order.

typescript

// Install the CLI (optional if using npx)
// npm install -g @angular/cli

// Scaffold a new standalone-based application
// npx @angular/cli new my-app --style=scss --routing --ssr=false

// Once scaffolding finishes:
// cd my-app
// ng serve

// main.ts — the application entry point in a standalone setup
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, appConfig).catch((err) =>
  console.error(err)
);

Running and Verifying the Project

After scaffolding, ng serve starts a local development server (by default at http://localhost:4200) with live reload enabled, so saved file changes are reflected in the browser almost instantly. Running ng test executes the unit test suite via Karma and Jasmine by default (or the configured test runner), and ng build produces an optimized, production-ready bundle in the dist/ folder. Verifying that all three commands work immediately after scaffolding is good practice before writing any application code, since it confirms the toolchain is healthy.

🏏

Cricket analogy: Running ng serve, ng test, and ng build right after scaffolding is like a team running a full net session, a fitness test, and a warm-up match before the tour officially begins, confirming the squad is fit before the first real fixture.

Unlike a manually assembled TypeScript + bundler setup, the Angular CLI keeps the build configuration mostly out of your project (encapsulated in @angular-devkit/build-angular by default) via angular.json, so you rarely hand-edit webpack or esbuild config directly — you eject or customize only when you have a specific, advanced need.

Choosing 'no routing' during ng new doesn't prevent you from adding the Angular Router later, but it does mean the CLI won't scaffold an initial app.routes.ts or wire up provideRouter for you — you'll need to add that configuration by hand, which is easy to forget on small demo projects that later grow multiple views.

The Angular CLI (@angular/cli) scaffolds a fully configured project via ng new, avoiding manual bundler setup.
ng new prompts for stylesheet format, SSR, and routing — choices that shape the generated file structure.
Angular 17+ projects default to standalone components and an esbuild/Vite-based build pipeline.
ng serve, ng test, and ng build are the three core commands to verify a fresh project's toolchain.
Build configuration lives mostly in angular.json rather than a hand-maintained bundler config file.
Declining routing at project creation means you must wire up the Router manually if you add it later.

Practice what you learned

1. Which command scaffolds a new Angular project with the CLI?

2. By default, what do Angular 17+ projects generated by `ng new` use for their component architecture?

3. Where does the Angular CLI store a project's build configuration?

4. What happens if you decline routing when running `ng new`?

5. Which command starts a local development server with live reload for an Angular project?

Was this page helpful?

What Is Angular?

Angular Project Structure

Related Study Notes in Web Development

Browse all study notes

Web Development

WebSockets Study Notes

Web Development · 30 topics

Web Development

WebAssembly Study Notes

WebAssembly · 30 topics

Web Development

gRPC Study Notes

Protocol Buffers · 30 topics

Web Development

Spring Boot Study Notes

Java · 30 topics

Web Development

Flask Study Notes

Python · 30 topics

Web Development

Django Study Notes

Python · 30 topics

Topics covered

#TypeScript#AngularStudyNotes#WebDevelopment#SettingUpAnAngularProject#Setting#Angular#Project#Installing#StudyNotes#SkillVeris

Setting Up an Angular Project