Angular Basics: Setting Up Angular Development Environment

Just getting started as an Angular developer? Or ready to optimize your setup? Read these tips for getting your Angular environment ready.

Getting started with Angular can feel like a lot at first, but once you’ve set up your environment, the pieces start coming together. Whether you’re diving into Angular for the first time or you’re an experienced developer spinning up a new project, setting up your development environment is what sets the tone for everything that follows.

In this guide, we’ll walk through how to install the Angular CLI, scaffold a new Angular project, run it locally and dissect the Angular Project File structure.

Setting Up Your First Angular Application

Angular provides a powerful command-line tool called the Angular CLI, which streamlines the entire development workflow. With it, you can scaffold new Angular apps, serve and test them locally, build for production and manage various parts of your project, right from the terminal.

Before installing Angular CLI, verify that you have Node.js and npm installed on your system. If you don’t, head over to the official Node.js download page and install an active LTS (Long-Term Support) version. Angular requires an active or maintenance LTS version of Node.js, so be sure to check your current version with:

node -v

Installing Angular CLI

To install the Angular CLI globally on your machine, run:

npm install -g @angular/cli

Creating a New Angular Project

Once the CLI is installed, navigate to the directory where you want to create your project, then run this command:

ng new my-angular-app

You will be prompted to answer a few setup questions, such as whether you want to include Angular routing and which stylesheet format you prefer. After you provide your answers, the Angular CLI will create your project and install the necessary dependencies. This process may take a few minutes, depending on your internet connection speed.

Next, navigate into your project folder:

cd my-angular-app

Running the Development Server

Angular CLI comes with a built-in development server that watches your files and reloads the app as you make changes. To start the server, run the following command:

ng serve -o

The ng serve command compiles your application and starts a local dev server at http://localhost:4200. The -o flag automatically opens the app in your default browser.

Angular Project Files Structure

In the previous section, we used the ng new command to generate an Angular project. This command creates a workspace folder and initializes a new application inside it. A workspace may include files for multiple projects, applications or libraries.

By default, ng new sets up an initial skeleton application at the root level of the workspace. Angular names the application after the workspace and places its source files in the src/ subfolder.

Workspace Configuration Files

The root of the workspace contains global configuration files, along with settings for the initial application and subfolders for its source and test files. All projects within the workspace share a central configuration file named: angular.json.

This file defines both global and project-specific settings for build, serve, test and development tools provided by the Angular CLI. It tells the CLI how to build and manage your application or library.

If you’re working with Angular 15, 16 or newer (including Angular 20), this file plays a key role in customizing CLI behavior to suit your project’s specific needs.

Open the angular.json file in the root folder of your project. Let’s analyze the configuration:

Note: As of the time of writing, Angular 20 is the latest version. While the core structure of angular.json remains consistent across recent versions, you may notice some variations depending on your version. However, I will explain some key concepts that are consistent across previous versions.

Understanding Angular.json

Let’s break down some of the key parts of the angular.json file.

Top-Level Structure

The properties at the top level of the file configure the workplace.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
     "my-angular-app": {
      ...
     }
   }
}

• $schema: A reference to the schema used to validate the file and provide IntelliSense support in editors.

• version: Specifies the schema version for the configuration file. It’s typically set to 1.

• newProjectRoot: Specifies the folder where new projects (apps or libraries) will be created using Angular CLI commands (e.g., ng generate application).

• projects: Contains all applications and libraries within the workspace. Each entry in this section represents a separate project and includes its own configuration block.

Project Configuration Block

Each entry inside the projects section includes configuration for a specific project. Here’s an example:

"projects": {
   "my-angular-app": {
     "projectType": "application",
     "schematics": {},
     "root": "",
     "sourceRoot": "src",
     "prefix": "app",
     "architect": {
       ...
      }
   }
}

• projectType: Can be “application” or “library”. An application is intended to run in the browser, while a library is meant to be imported into other Angular projects.

• schematics: A set of schematics defines the default options for the ng generate sub-commands in a project. Angular schematics are templates or instructions used to modify a project by generating new files or updating existing ones. They allow you to customize how components, services, modules and other elements are created within your project.

• root: Specifies the root folder of the project, relative to the workspace directory. For the initial application, this is typically set to an empty string (""), placing it at the top level of the workspace.

• sourceRoot: Points to the root directory of this project’s source files (usually “src”). It helps the Angular CLI locate your app’s source code (like components, services, main.ts, etc.) during build, serve and test commands.

• prefix: Used in auto-generated component selectors (e.g., <app-header>).

• architect: (Called targets in older versions.) Configures build-related tasks such as building, serving, testing and linting.

For a comprehensive understanding of the angular.json file structure, consult the official Angular documentation.

Application Source Files src

The src directory is the main development folder in an Angular project. It contains all the essential files required to run your application—this is where your application’s logic, components, services, routes and assets are defined.

• app/: This is where your components, routes, services and features go. With Angular 20, standalone components and APIs are now the default:

app/
  app.component.ts       # Root component (standalone by default in Angular 20)
  app.component.html     # Root component template
  app.component.css      # Root component styles
  app.routes.ts          # Application routes using standalone routing
  app.config.ts          # Optional configuration (e.g., providers)
  app.component.spec.ts  # Defines a unit test for AppComponent

In Angular 20, projects start clean, there’s no app.module.ts by default unless you opt into modules. Instead, main.ts acts as your new app entry point, using bootstrapApplication() to launch. It’s a leaner, module-light approach out of the box.

• main.ts: This is the main entry point for your application. In Angular 20, it’s the new entry point for bootstrapping your Angular app:

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideAnimations()
  ]
});

This replaces the old module-based platformBrowserDynamic().bootstrapModule(AppModule) pattern.

• index.html: This is the main HTML page that is served when someone visits your site. The CLI automatically adds all JavaScript and CSS files when building your app, so you typically don’t need to add any <script> or <link> tags here manually.

• style.css: Global styles for your app. You can switch to SCSS, Less or another preprocessor during project setup.

For a deeper understanding of the Angular workspace and how to manage multi-project workspaces, check out the official Angular documentation: Angular CLI Workspaces.

Wrapping Up

Angular has come a long way, and Angular 20 takes another big step toward simplifying project setup and boosting developer productivity. With the right environment setup and a clear understanding of the modern project structure, you’ll spend less time wrestling with configurations and more time developing.

In this guide, we explored Angular CLI, how to set it up and used it to generate a new Angular app. We also walked through the workspace configuration and file structure. While the structure hasn’t changed drastically from previous versions, Angular 20 fully embraces standalone components, simplified bootstrapping and tree-shakable provider APIs for a cleaner and more modern development experience.

But don’t stop here, dive deeper into the Angular’s official documentation or read through the Angular Basics series if you’re new to Angular.

Good luck, and enjoy building with Angular!