Angular CLI Install | Getting Started

Sam Erickson
Updated 13 hours ago
0

Key Takeaways

Install a compatible Node.js version before installing the Angular CLI. “Node.js 16 or greater” is no longer valid guidance.
ng new my-angular-app generates a working workspace and installs its dependencies.
ng serve runs your app locally, normally at http://localhost:4200/.
Project CLI updates, unit testing, production builds, and deployment are separate tasks.

To install Angular CLI, run npm install -g @angular/cli@latest after installing a supported Node.js version. Then create an app with ng new and run it with ng serve: the CLI handles the initial project configuration instead of making you assemble it manually.

This walkthrough covers Angular 22, the actively supported major release as of October 17, 2026. Check Angular’s release and support information when following the guide later.

1. Check Node.js and npm

Angular supports specific Node.js ranges—not every version above a minimum. For Angular 22, the documented ranges are ^22.22.3 || ^24.15.0 || ^26.0.0: Node 22.22.3 or later within 22.x, Node 24.15.0 or later within 24.x, or Node 26.x. Consult the Angular version compatibility table for an existing project.

For this walkthrough, choose a current Node 24 LTS release that meets that minimum. Node 16 is end-of-life; see the Node.js release status and our guide to choosing a Node.js version.

Installing Node.js also installs npm, its package manager. Confirm both are available in your terminal:

node --version
npm --version

2. Install Angular CLI

Install the CLI globally, then check its version:

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

-g installs the command-line tool globally rather than inside one project. @latest explicitly selects the package’s latest release tag.

3. Create a New Angular App

From the directory where you keep your projects, outside an existing Angular workspace, run:

ng new my-angular-app

The CLI creates a my-angular-app folder containing a workspace and starter application, then installs dependencies. A workspace is the container for application code and shared tooling configuration; it can contain applications and libraries. Our Angular workspace, library, and application comparison explains those boundaries.

Answer the configuration prompts, such as stylesheet format and rendering options. Available questions and defaults vary by CLI version; routing can also be configured. For a basic browser-only starter, choose CSS and decline server-side rendering.

Alternatively, replace the previous command with this explicit routing-and-stylesheet choice:

ng new my-angular-app --routing --style=css

--routing configures navigation between views; --style=css selects CSS stylesheets. Other prompts can still appear.

4. Run the Angular App Locally

After dependency installation finishes, enter the generated directory and start the development server:

cd my-angular-app
ng serve

Open http://localhost:4200/. The server watches your source files and rebuilds when they change; live reload updates the browser during development. This is a development workflow, not a production server.

If port 4200 is occupied, use the address printed by the CLI or stop the server with Ctrl+C and choose another port:

ng serve --port 4300

With that command, open http://localhost:4300/.

What the CLI Generates and Configures

Workspace and TypeScript Configuration

You don't need to understand every generated file before making your first edit. Start with these:

package.json: project dependencies and npm scripts.
angular.json: CLI configuration for building, serving, and testing.
tsconfig.app.json: TypeScript configuration for application code.
src/main.ts: the application entry point.

These files connect your source code to the generated tooling configuration. Angular’s workspace file reference explains their roles.

Standalone Components Instead of a Required App Module

New projects use standalone applications by default, without NgModules—the module-based approach used by older scaffolds. You don't need to find or create app.module.ts to run the generated application. An NgModule-based scaffold remains available with --standalone=false when you specifically need it.

Current default filenames include src/app/app.ts for the root component and src/app/app.html for its template. With CSS selected, src/app/app.css contains its styles; app.config.ts holds application configuration. Older tutorials may instead show app.component.ts.

Global CLI Versus the Project’s Local CLI

The generated project also declares its own @angular/cli development dependency. Updating the global installation doesn't upgrade that dependency.

For project work, npm scripts select locally installed executables. Inside the generated workspace, these commands check the project CLI and start its development server:

npm run ng -- version
npm start

In the generated scripts, npm start runs ng serve. This gives your team a convenient project-local entry point.

Unit and End-to-End Testing

New Angular 22 CLI projects use Vitest for unit tests by default, with generated spec files. From another terminal in the workspace, run:

ng test

The test command watches for changes and reruns tests. Karma remains supported for existing setups, but isn't the default described here.

End-to-end tests check user journeys through the application and require separate setup. Follow Angular’s E2E setup guide to choose an integration, or add Playwright Test directly.

Update the Global CLI and an Existing Project Separately

To refresh the global CLI, run:

npm install -g @angular/cli@latest

For an existing application, first commit your changes and consult the Angular Update Guide. The project update command is:

ng update @angular/cli @angular/core

For major upgrades, follow the guide’s version-targeted commands and upgrade one major version at a time. Recheck Node.js compatibility and run your tests after each upgrade. Angular’s update tooling can apply code migrations as well as dependency changes.

A Running Starter Is Not a Production Deployment

The CLI has removed the initial setup work; it hasn't deployed your application. Generate a production build with:

ng build --configuration production

Hosting that output is a separate step. The deployment approach depends on whether your app is browser-only or uses server rendering. Continue with building and deploying with the Angular CLI and Angular’s deployment documentation.

Common Mistakes

“ng: command not found”: check that npm’s global executable directory is on your terminal’s PATH.
Global installation fails with EACCES: follow npm’s permission-error guidance; a Node version manager is its recommended solution.
Running project commands in the wrong folder: enter my-angular-app before serving or testing the generated app.

FAQ

How do I install the Angular CLI?

Install a supported Node.js version and npm, then run npm install -g @angular/cli@latest. Run ng version to verify the CLI installation.

Which Node.js version does Angular CLI require?

The requirement depends on your Angular version. Angular 22’s documented Node.js ranges are ^22.22.3 || ^24.15.0 || ^26.0.0; check Angular’s compatibility table rather than assuming every newer major works.

How do I create and run a new Angular project?

Run ng new my-angular-app, then cd my-angular-app, then ng serve. Open http://localhost:4200/ unless the CLI reports a different port.

Does a new Angular CLI project use standalone components or NgModules?

New CLI applications are standalone by default and don't require a root NgModule. Use ng new my-angular-app --standalone=false only when you specifically need an NgModule-based scaffold.

How do I update the global Angular CLI and an existing project?

Use npm install -g @angular/cli@latest for the global installation. Update an existing workspace with ng update @angular/cli @angular/core, following Angular’s Update Guide one major version at a time.