To set up Angular locally, install a Node.js version supported by your Angular release, install Angular CLI, create a project with ng new, and run it with the development server. A successful start prints a local address—usually http://localhost:4200/—where you can open the app in a browser.
What you need before installing Angular
- Node.js: Angular CLI uses Node.js to run its tools. Angular’s current installation page lists Node.js v22.22.3 or newer; its local setup guide describes the requirement as an active LTS or maintenance LTS release. Since supported versions depend on the Angular release, check Angular’s current installation and compatibility guidance before choosing a Node.js version.
- A terminal and text editor: These are needed to run commands and edit files. Angular recommends Visual Studio Code and Angular Language Service, but they are workflow recommendations, not Angular prerequisites. The first-app tutorial also names WebStorm as an editor option.
You can use npm, pnpm, yarn, or bun with Angular’s setup instructions. The CLI defaults to npm. If you only want to explore Angular without installing a local workspace, Angular provides an online playground and tutorial through its CLI overview.
As an Amazon Associate I earn from qualifying purchases.
Install Angular CLI
Open a terminal and install the CLI globally with npm:
Recommended Free Tools
npm install -g @angular/cliThe package is @angular/cli; its command-line interface is ng. The CLI creates and manages Angular workspaces and applications.
#1 Best Overall
If the global install fails, the cause may be platform-specific permissions. Angular notes that PowerShell’s execution policy can affect npm global scripts on Windows, while global script permissions or ownership may cause issues on Unix-like systems. Don’t change an execution policy or use elevated privileges automatically; first understand the implications of the change and follow the relevant platform guidance in Angular’s setup instructions.
Create a workspace and starter app
In the terminal, navigate to the parent directory where you want the project, then run:
ng new my-appRun ng new outside an existing Angular workspace. The CLI creates a workspace directory named my-app, generates its initial application, and installs the required packages. It may ask about options such as routing; for a basic first project, accepting the defaults is a reasonable choice. See the ng new command reference for options including package manager selection, skipping dependency installation or Git initialization, and creating an empty workspace.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Start the development server
Move into the generated project directory and start Angular’s local development server:
Rank #3
cd my-app
ng serve --openThe server watches the project files and rebuilds as you make changes. When it reports that it is ready, open the displayed local address; Angular’s guide gives http://localhost:4200/ as the default. The installation guide also shows npm start as a way to start the project.
Find the files you will edit
The starter application’s source files are in src/. A workspace can hold more than one application or library; additional generated applications and libraries go under projects/ by default. Angular’s file structure reference explains the usual layout.
When to create an empty workspace
For a single beginner project, the regular ng new my-app flow creates the workspace and first application together. For a workspace intended to hold multiple apps, create an empty workspace first, then generate applications inside it:
ng new my-workspace --no-create-application
cd my-workspace
ng generate application app-oneWorkspace operations such as ng generate should be run from inside the workspace. Angular documents the empty-workspace option and application generation in its ng new reference and workspace file structure guide.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
