Angular CLI Setup — Create Your First App (Angular 21+)

2. Install the Angular CLI

Install the CLI globally so you can run ng from any folder:

npm install -g @angular/cli@21
ng version

The output shows your Angular CLI version, Node version, and package versions. Keep CLI and project versions aligned (both 21.x for this series).

3. Create a Project with ng new

Choose a parent folder (for example ~/projects) and run:

ng new my-angular-app

Angular CLI 21 prompts for options. Recommended answers for this tutorial:

• Routing? Yes (we use it in later lessons)
• Stylesheet format? CSS (simplest) or SCSS if you prefer
• SSR / SSG? No for now (add later for SEO sites)

New Angular 21 projects are standalone by default, use Vitest for unit tests, and do not include zone.js unless you opt in. That means faster startup and more predictable updates — signals drive change detection.

cd my-angular-app
ng serve

Open http://localhost:4200/ — you should see the default Angular welcome page.

4. Project Structure Walkthrough

Key files in a fresh Angular 21 app:

my-angular-app/
├── src/
│   ├── app/
│   │   ├── app.ts          # Root standalone component
│   │   ├── app.html        # Root template
│   │   ├── app.css         # Root styles
│   │   ├── app.config.ts   # App-wide providers (router, etc.)
│   │   └── app.routes.ts   # Route definitions
│   ├── index.html          # Single HTML shell
│   ├── main.ts             # Bootstrap entry point
│   └── styles.css          # Global styles
├── angular.json            # Workspace / build configuration
├── package.json            # Dependencies and scripts
└── tsconfig.json           # TypeScript compiler options

Open src/app/app.html and replace the default template with:

<h1>Hello Angular 21!</h1>
<p>My first Angular app is running.</p>

Save the file — the browser refreshes automatically (hot reload).

5. Run Tests with Vitest

Angular 21 uses Vitest instead of Karma:

ng test

Vitest runs faster and fits modern JavaScript tooling. You will write meaningful tests in later lessons; for now, confirm the default spec passes.

6. Troubleshooting

• Node version too old — upgrade to 22.12+; use nvm install 22 if you use nvm
• Port 4200 in use — run ng serve --port 4300
• ng: command not found — reinstall CLI globally or use npx @angular/cli@21 new my-app
• Permission errors on npm -g — fix npm global prefix or use a Node version manager

7. Next Steps

Your Angular 21 app is running. Continue to Lesson 3 — Components and Templates to build standalone components, bindings, and signals.

Frequently Asked Questions

What Node version do I need for Angular 21?
Node.js 22.12 or newer. Check with node --version before running ng new.

Does Angular 21 still use zone.js?
Not in new projects by default. Angular 21 scaffolds zoneless apps that rely on signals and explicit change detection. Existing apps can still use zone.js during migration.

Should I use npm, yarn, or pnpm?
Any works. This series uses npm because it ships with Node.js.