Setting up an Angular Project¶

Prerequisites¶

Before we start with Angular, make sure you have the following installed:

Node.js (version 18.19.0 or later - Note: Angular 20 works best with LTS versions)
npm (comes with Node.js) or yarn
A code editor (VS Code recommended)

Note: If you're using an odd-numbered Node.js version (like v23), you may see warnings. For production use, stick to LTS versions (even numbers like v18, v20, v22).

Installing Angular CLI¶

The Angular CLI (Command Line Interface) is the official tool for creating and managing Angular projects.

npm install -g @angular/cli

Verify the installation:

ng version

Creating Your First Angular Project¶

Basic Project Creation¶

ng new my-angular-app

The CLI will ask you several questions:

Would you like to share pseudonymous usage data with the Angular Team? → No (or your preference - once only)
Do you want to create a 'zoneless' application without zone.js? → No (recommended for beginners)
Do you want to enable Server-Side Rendering (SSR)? → No (for simple projects)

Project Creation with Options¶

You can also create a project with specific options:

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

Common options:

--routing: Adds Angular Router
--style=css|scss|sass|less: Choose stylesheet format
--skip-git: Don't initialize a git repository
--skip-install: Don't run npm install
--minimal: Create a minimal project

Understanding the Project Structure¶

After creating your project, you'll see this structure:

my-angular-app/
├── src/                    # Source code
│   ├── app/               # Main application folder
│   │   ├── app.ts             # Root component (standalone)
│   │   ├── app.html           # Root component template
│   │   ├── app.css            # Root component styles
│   │   ├── app.spec.ts        # Root component tests
│   │   ├── app.config.ts      # App configuration
│   │   └── app.routes.ts      # Route definitions
│   ├── index.html         # Main HTML file
│   ├── main.ts            # Application entry point
│   └── styles.css         # Global styles
├── public/                # Static assets (images, favicon, etc.)
├── .vscode/              # VS Code configuration
├── angular.json          # Angular CLI configuration
├── package.json          # npm dependencies and scripts
├── tsconfig.json         # TypeScript configuration
└── README.md             # Project documentation

Key Files Explained¶

src/main.ts: The entry point of your application

This is where Angular starts your application. It bootstraps the root component and applies the application configuration.

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { App } from './app/app';

bootstrapApplication(App, appConfig)
  .catch((err) => console.error(err));

src/app/app.ts: The root component (now a standalone component)

This is your main application component that serves as the container for all other components. Angular 20 uses standalone components by default, eliminating the need for NgModules in simple applications.

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  protected title = 'my-angular-app';
}

src/app/app.config.ts: Application configuration with providers

This file contains all the services and configurations your application needs. It replaces the traditional app.module.ts file in modern Angular applications.

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes)
  ]
};

angular.json: Configuration for Angular CLI commands

This file controls how Angular CLI builds, serves, and tests your application. It defines build configurations, asset paths, and various project settings.

package.json: Dependencies and npm scripts

Contains your project's metadata, dependencies, and custom scripts for building, testing, and running your application.

Running Your Angular Application¶

Development Server¶

cd my-angular-app
ng serve

This starts a development server at http://localhost:4200. The app will automatically reload when you make changes.

Other Useful Commands¶

# Start with specific port
ng serve --port 4300

# Open browser automatically
ng serve --open

# Build for production
ng build

# Run tests
ng test

# Run end-to-end tests
ng e2e

# Generate components, services, etc.
ng generate component my-component
ng generate service my-service

Angular CLI Configuration¶

The Angular CLI is highly customizable and allows you to set preferences that will apply to all your projects or specific ones. This saves time by automatically applying your preferred settings when generating new components, services, or entire projects.

Global Configuration¶

Global configurations apply to all Angular projects on your machine. These are especially useful when you have consistent preferences across all your projects.

# Set default style extension
ng config -g defaults.styleExt css

# Set default component options
ng config -g defaults.component.flat false

Project-Specific Configuration¶

Sometimes you need different settings for specific projects. You can override global settings or add project-specific configurations by modifying the angular.json file in your project root.

{
  "projects": {
    "my-angular-app": {
      "schematics": {
        "@schematics/angular:component": {
          "style": "css",
          "skipTests": false
        }
      }
    }
  }
}

Development Workflow¶

Recommended Development Setup¶

Install Angular DevTools: Browser extension for debugging
Use Angular Language Service: VS Code extension for better IntelliSense
Configure Prettier: Code formatting
Set up ESLint: Code linting

VS Code Extensions¶

Essential extensions for Angular development:

Angular Language Service
Angular Snippets
Angular DevTools
TypeScript Importer
Prettier
ESLint

Next Steps¶

Now that you have your Angular project set up, you're ready to:

Understand the component system
Learn about Angular modules
Explore templates and data binding
Work with services and dependency injection

Your development server should be running, and you should see the default Angular welcome page at http://localhost:4200.

Common Issues and Solutions¶

Port Already in Use¶

ng serve --port 4300

Permission Issues on macOS/Linux¶

sudo npm install -g @angular/cli

Node Version Issues¶

Use Node Version Manager (nvm) to manage Node.js versions:

nvm install 18
nvm use 18

Summary¶

Angular CLI is the official tool for Angular development
ng new creates a new project with a well-organized structure
ng serve starts the development server
The project structure follows Angular conventions
Angular CLI provides many helpful commands for development

You're now ready to dive into Angular components and start building your application!