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.
Try Angular without local setup
If you are new to Angular, you might want to start with Try it now!, which introduces the essentials of Angular in your browser. This standalone tutorial takes advantage of the interactive StackBlitz environment for online development. You don't need to set up your local environment until you're ready.
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
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 npm 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
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.