Setting Up an Angular Project
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.
// 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 newprompts 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, andng buildare 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?
You May Also Like
The Angular CLI
How the Angular CLI's ng commands generate code, run builds, and enforce consistent project structure across the development lifecycle.
What Is Angular?
An overview of Angular as a full-featured, opinionated TypeScript framework for building web applications, and how it compares to lighter-weight libraries.
Angular Project Structure
A guided tour of the files and folders the Angular CLI generates, and the conventions that keep large Angular codebases navigable.
Building and Deploying an Angular App
Learn how ng build produces an optimized production bundle, what build configurations and budgets control, and common strategies for deploying an Angular app to a live environment.
Related Reading
Related Study Notes in Web Development
Browse all study notesWebSockets Study Notes
Web Development · 30 topics
Web DevelopmentWebAssembly Study Notes
WebAssembly · 30 topics
Web DevelopmentgRPC Study Notes
Protocol Buffers · 30 topics
Web DevelopmentSpring Boot Study Notes
Java · 30 topics
Web DevelopmentFlask Study Notes
Python · 30 topics
Web DevelopmentDjango Study Notes
Python · 30 topics