Angular Setup Install Create Your First App

Angular Setup

Set up a current Angular workspace, run it locally, identify the files that bootstrap the application, and create one standalone component. You should finish able to explain the generated project instead of treating Angular CLI commands as magic.

Angular Purpose

Angular is a TypeScript application framework for building browser interfaces from components, declarative templates, dependency injection, routing, forms, HTTP services, and a production build toolchain.

A new workspace uses standalone components and application providers. This page focuses on the files and commands needed to run that structure; NgModules are covered separately for projects that still use them.

Why Angular

Components give each screen a typed class, template, styles, dependencies, and test boundary.
The router, forms, HTTP client, rendering, and testing packages follow one release and tooling model.
TypeScript checks component APIs and service contracts before the browser executes them.
The CLI creates workspaces, serves development builds, generates artifacts, runs tests, and builds deployable output.
Signals model synchronous reactive state, while RxJS handles asynchronous event and request pipelines.
Dependency injection makes configuration, infrastructure, and domain collaborators replaceable in tests.

Prerequisites

Before starting with Angular, ensure you have the following installed and basic knowledge:

A Node.js release supported by the Angular version in package.json; verify the current matrix before installation.
npm or the package manager selected for the workspace.
Basic HTML, CSS, JavaScript - Understanding of web fundamentals
TypeScript basics - Familiarity with types, interfaces, and classes (optional but helpful)
An editor with the Angular Language Service for template diagnostics and completion.

Install the Toolchain

Verify Node.js

Check Prerequisites

# Check the installed versions
node --version

npm --version

# Compare Node.js with https://angular.dev/reference/versions
# before creating or upgrading the workspace.

Install Angular CLI

The Angular CLI (Command Line Interface) is a powerful tool that helps you create, develop, test, and deploy Angular applications. It automates many development tasks and follows established Angular conventions.

Install Angular CLI Globally

# Install Angular CLI globally (one-time setup)
npm install -g @angular/cli

# Verify installation
ng version
# Get help on available commands
ng help

# Update Angular CLI to latest version (if already installed)
npm update -g @angular/cli

Create a Workspace

Use the ng new command to create a new Angular project. The CLI will ask you a few questions about routing and styling preferences.

The ng serve command compiles your application, starts a development server, and watches for file changes. Any changes you make will automatically reload the browser.

Create New Project

# Create a new Angular project
ng new my-first-app

# The CLI will ask:
# ? Would you like to add Angular routing? (y/N) → Press Y
# ? Which stylesheet format would you like to use? → Choose CSS (or SCSS)

# Navigate into the project directory
cd my-first-app

# Start the development server
ng serve

# Or start and automatically open in browser
ng serve --open

# The app will be available at: http://localhost:4200/

Project Anatomy

Project Structure

The generated workspace separates application source, build configuration, TypeScript configuration, package metadata, and public assets. Start by tracing main.ts to app.config.ts and the root component.

Project Structure Explained

my-first-app/
├── node_modules/          # Dependencies (auto-generated, don't edit)
├── src/                   # Source code directory
│   ├── app/               # Application code
│   │   ├── app.component.ts      # Root component (TypeScript)
│   │   ├── app.component.html    # Root component template
│   │   ├── app.component.css     # Root component styles
│   │   ├── app.component.spec.ts # Unit tests for root component
│   │   ├── app.config.ts         # App-level configuration (replaces AppModule)
│   │   └── app.routes.ts         # Routing configuration
│   ├── assets/            # Static files (images, fonts, etc.)
│   ├── index.html         # Main HTML file
│   ├── main.ts            # Application entry point (bootstraps app)
│   └── styles.css         # Global styles
├── angular.json           # Angular CLI workspace configuration
├── package.json           # npm dependencies and scripts
├── tsconfig.json          # TypeScript compiler configuration
├── tsconfig.app.json      # TypeScript config for the app
└── README.md              # Project documentation

Key Files:
- main.ts: Bootstraps the application
- app.config.ts: Provides app-level services and configuration
- app.component.ts: Root component of your application
- app.routes.ts: Defines application routes

Root Component

The root standalone component is bootstrapped from main.ts. Its imports make template dependencies visible, while app.config.ts registers application-wide providers such as routing and configured HTTP features.

Root Component & Bootstrap

// app.component.ts - Root standalone component
import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  template: `
    <div class="container">
      <h1>{{ title() }}</h1>
      <p>Welcome to Angular!</p>

      <div class="counter">
        <p>Count: {{ count() }}</p>
        <button (click)="increment()">Increment</button>
      </div>

      <router-outlet></router-outlet>
    </div>
  `,
  styles: [`
    .container { padding: 20px; }
    h1 { color: #dd0031; }
    .counter { margin: 20px 0; }
    button {
      padding: 10px 20px;
      background: #dd0031;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  `]
})
export class AppComponent {
  title = signal('My First Angular App');
  count = signal(0);

  // Method to increment counter
  increment() {
    this.count.update(value => value + 1);
  }

  // Method to change title
  changeTitle(newTitle: string) {
    this.title.set(newTitle);
  }
}

Bootstrap the Root Component

// main.ts - Application entry point
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

// Bootstrap the standalone root component
bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

Root Component Usage

// app.config.ts - Application configuration
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),  // Configure HttpClient features for this application
    // Add other app-level providers here
  ]
};

Daily Development

CLI Commands

The Angular CLI provides commands for generating components, services, and other Angular artifacts, as well as building and testing your application.

Command	Description	Example
ng new	Create a new Angular project	ng new my-app
ng serve	Start dev server (localhost:4200)	ng serve --open
ng generate component	Generate a new component	ng g c header
ng generate service	Generate a new service	ng g s data
ng generate pipe	Generate a new pipe	ng g p currency
ng generate directive	Generate a new directive	ng g d highlight
ng build	Build for production	ng build --configuration production
ng test	Run the configured unit-test target	ng test
ng lint	Run linting	ng lint
ng update	Update Angular and dependencies	ng update @angular/core
ng version	Show Angular CLI version	ng version
ng add	Add a library to your project	ng add @angular/material

Development Workflow

Create project: ng new my-app
Start dev server: ng serve
Generate components: ng g c component-name
Generate services: ng g s service-name
Make changes: Edit files - browser auto-reloads
Run tests: ng test
Build for production: ng build
Deploy: Upload dist/ folder to hosting

Editor Setup

Visual Studio Code is the recommended editor for Angular development. Install these essential extensions:

Angular Language Service - IntelliSense for Angular templates
Angular Snippets - Code snippets for faster development
ESLint - Code quality and linting
Prettier - Code formatting
Auto Rename Tag - Automatically rename paired HTML tags
Path Intellisense - Autocomplete file paths
GitLens - Enhanced Git integration

First Component

Components are the building blocks of Angular applications. Let's create a simple "Hello" component.

Generate and Use a Component

# Generate a new standalone component
ng generate component hello

# Shorthand
ng g c hello

# This creates:
# - src/app/hello/hello.component.ts
# - src/app/hello/hello.component.html
# - src/app/hello/hello.component.css
# - src/app/hello/hello.component.spec.ts

Creating Your First Component

// hello.component.ts - Generated component
import { Component, input, signal } from '@angular/core';

@Component({
    selector: 'app-hello',
    standalone: true,
    template: `
        <div class="hello-box">
            <h2>Hello, {{ name() }}!</h2>
            <p>You've been greeted {{ greetCount() }} times.</p>
            <button (click)="greet()">Greet Again</button>
        </div>
    `,
    styles: [`
        .hello-box {
            padding: 20px;
            border: 2px solid #dd0031;
            border-radius: 8px;
            margin: 20px 0;
        }
        button {
            background: #dd0031;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    `]
})
export class HelloComponent {
    name = input('World');
    greetCount = signal(0);

    greet() {
        this.greetCount.update(count => count + 1);
    }
}

First Component Usage

// app.component.ts - Import and use the component
import { Component } from '@angular/core';
import { HelloComponent } from './hello/hello.component';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [HelloComponent],  // Import the component
    template: `
        <h1>My Angular App</h1>
        <app-hello [name]="'Alice'"></app-hello>
        <app-hello [name]="'Bob'"></app-hello>
    `
})
export class AppComponent {}

Continue Learning

Learning Path

Now that you have Angular set up, here's what to learn next:

Components - Learn about component lifecycle, inputs, outputs
Templates - Master template syntax, directives, pipes
Signals - Understand reactive state management with Signals
Services - Create services for business logic and data
Routing - Implement navigation between pages
Forms - Build reactive and template-driven forms
HTTP - Make API calls and handle responses
RxJS - Learn reactive programming with Observables

Confirm the page outcome

Setup Readiness

5 checks

I verified Node.js against the Angular compatibility matrix and can explain local versus global CLI tooling.
I can trace main.ts, app.config.ts, app.routes.ts, and the root standalone component.
I can serve, test, build, and inspect the generated output without relying on obsolete flags.
I can generate and import a standalone child component with a typed input signal.
I know which state belongs in a component, which behavior belongs in a service, and which topics to learn next.

Setup Readiness Questions

A global CLI only makes the ng command available; the project still requires a supported Node.js version and the local packages installed in its workspace.

A generated standalone component is not globally visible. AppComponent must import HelloComponent in the TypeScript file and include it in the @Component imports array before the app-hello selector can be used.

input() returns a read-only InputSignal. Angular writes the parent binding into that signal, and the child reads its current value by calling it. Use input.required<T>() when omission should be a template compilation error.

Previous Next