Setting up the local environment and workspace

This guide explains how to set up your environment for Angular development using the Angular CLI. It includes information about installing the CLI, creating an initial workspace and starter app, and running that app locally to verify your setup.

Before you start

To use Angular CLI, you should be familiar with the following:

You should also be familiar with usage of command line interface (CLI) tools and have a general understanding of command shells. Knowledge of TypeScript is helpful, but not required.

Dependencies

To install Angular CLI on your local system, you need to install Node.js. Angular CLI uses Node and its associated package manager, npm, to install and run JavaScript tools outside the browser.

Download and install Node.js, which will include the npm CLI as well. Angular requires an active LTS or maintenance LTS version of Node.js. See Angular's version compatibility guide for more information.

Install the Angular CLI

To install the Angular CLI, open a terminal window and run the following command:

npm install -g @angular/cli

pnpm install -g @angular/cli

yarn global add @angular/cli

bun install -g @angular/cli

Powershell execution policy

On Windows client computers, the execution of PowerShell scripts is disabled by default, so the above command may fail with an error. To allow the execution of PowerShell scripts, which is needed for npm global binaries, you must set the following execution policy:

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

Carefully read the message displayed after executing the command and follow the instructions. Make sure you understand the implications of setting an execution policy.

Unix permissions

On some Unix-like setups, global scripts may be owned by the root user, so to the above command may fail with a permission error. Run with sudo to execute the command as the root user and enter your password when prompted:

sudo npm install -g @angular/cli

sudo pnpm install -g @angular/cli

sudo yarn global add @angular/cli

sudo bun install -g @angular/cli

Make sure you understand the implications of running commands as root.

Create a workspace and initial application

You develop apps in the context of an Angular workspace.

To create a new workspace and initial starter app, run the CLI command ng new and provide the name my-app, as shown here, then answer prompts about features to include:

ng new my-app

The Angular CLI installs the necessary Angular npm packages and other dependencies. This can take a few minutes.

The CLI creates a new workspace and a small welcome app in a new directory with the same name as the workspace, ready to run. Navigate to the new directory so subsequent commands use this workspace.

cd my-app

Run the application

The Angular CLI includes a development server, for you to build and serve your app locally. Run the following command:

ng serve --open

The ng serve command launches the server, watches your files, as well as rebuilds the app and reloads the browser as you make changes to those files.

The --open (or just -o) option automatically opens your browser to http://localhost:4200/ to view the generated application.

Workspaces and project files

The ng new command creates an Angular workspace folder and generates a new application inside it. A workspace can contain multiple applications and libraries. The initial application created by the ng new command is at the root directory of the workspace. When you generate an additional application or library in an existing workspace, it goes into a projects/ subfolder by default.

A newly generated application contains the source files for a root component and template. Each application has a src folder that contains its components, data, and assets.

You can edit the generated files directly, or add to and modify them using CLI commands. Use the ng generate command to add new files for additional components, directives, pipes, services, and more. Commands such as ng add and ng generate, which create or operate on applications and libraries, must be executed from within a workspace. By contrast, commands such as ng new must be executed outside a workspace because they will create a new one.

Next steps

• Learn more about the file structure and configuration of the generated workspace.

• Test your new application with ng test.

• Generate boilerplate like components, directives, and pipes with ng generate.

• Deploy your new application and make it available to real users with ng deploy.

• Set up and run end-to-end tests of your application with ng e2e.