Angular Environment Setup & Your First App

Angular is a full-featured, opinionated frontend framework built on TypeScript. It handles routing, forms, HTTP, state management, and testing out of the box — no need to assemble a stack yourself. This lesson gets you from zero to a running app in under 30 minutes.

Prerequisites

Node.js 18 or later (check with node -v)
npm 9+ (comes with Node) or yarn
Basic TypeScript knowledge helps but is not required

Install the Angular CLI

The Angular CLI (ng) is how you create, build, serve, and test Angular apps.

Bash

npm install -g @angular/cli

Verify installation:

Bash

ng version

You should see Angular CLI version 17+ and your Node/npm versions.

Create a New Project

Bash

ng new my-first-app

The CLI asks two questions:

Would you like to add Angular routing? → Yes
Which stylesheet format? → CSS (or SCSS if you prefer)

This scaffolds a complete project. The --standalone architecture is the default in Angular 17+ — no NgModule boilerplate needed.

Bash

cd my-first-app
ng serve

Open http://localhost:4200. You'll see the Angular welcome page. The dev server watches for file changes and hot-reloads automatically.

Project Structure

my-first-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts      ← Root component (logic)
│   │   ├── app.component.html    ← Root component (template)
│   │   ├── app.component.css     ← Root component (styles)
│   │   ├── app.component.spec.ts ← Root component (tests)
│   │   └── app.config.ts         ← App-level providers (routing, HTTP)
│   ├── main.ts                   ← Entry point — bootstraps the app
│   └── index.html                ← Shell HTML —  lives here
├── angular.json                  ← CLI config (build, serve, test options)
├── tsconfig.json                 ← TypeScript config
└── package.json

Key files:

main.ts — bootstraps the root component:

TYPESCRIPT

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

bootstrapApplication(AppComponent, appConfig).catch(console.error);

app.config.ts — register global providers (routing, HTTP client):

TYPESCRIPT

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(),
  ],
};

Your First Component

Open app.component.ts:

TYPESCRIPT

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

@Component({
  selector: 'app-root',        // HTML tag: <app-root>
  standalone: true,            // no NgModule needed
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'my-first-app';
  count = 0;

  increment() {
    this.count++;
  }
}

Update app.component.html:

HTML

<h1>Hello, {{ title }}!</h1>
<p>Count: {{ count }}</p>
<button (click)="increment()">Click me</button>

Save the file — the browser updates instantly. This is one-way data binding ({{ }}) and event binding ((click)). You'll learn all binding forms in the next lesson.

Generate Files with the CLI

Don't create files manually — use the CLI. It generates the right file structure and wires things up:

Bash

# Generate a component
ng generate component features/user-profile
# Short form:
ng g c features/user-profile

# Generate a service
ng g s services/auth

# Generate a pipe
ng g p pipes/truncate

Generated files follow a consistent naming convention: feature-name.component.ts, feature-name.service.ts, etc.

Useful CLI Commands

Bash

ng serve                        # Start dev server (port 4200)
ng serve --port 4201            # Custom port
ng build                        # Production build → dist/
ng build --configuration=production  # Explicit prod build
ng test                         # Run unit tests (Karma + Jasmine)
ng lint                         # Run ESLint
ng generate component <name>    # New component
ng generate service <name>      # New service
ng generate guard <name>        # New route guard
ng add @angular/material        # Add Angular Material UI library

Standalone vs. Module-based

Angular 17+ defaults to standalone components — components declare their own imports instead of being registered in an NgModule. This is the modern approach and what this course uses.

TYPESCRIPT

// Standalone (modern — Angular 17+)
@Component({
  selector: 'app-user',
  standalone: true,
  imports: [CommonModule, RouterLink],  // imports go here
  template: `...`,
})
export class UserComponent {}

Older codebases use NgModule. You'll encounter both, but standalone is the direction Angular is headed.

VS Code Setup

Install these extensions for the best Angular experience:

Angular Language Service — template autocomplete, type checking in HTML
ESLint — code quality
Prettier — code formatting
Angular Snippets — code snippets

Quick Reference

Install CLI:    npm install -g @angular/cli
New project:    ng new project-name
Dev server:     ng serve → localhost:4200
New component:  ng g c component-name
New service:    ng g s service-name
Build:          ng build
Test:           ng test
Config file:    angular.json
Entry point:    src/main.ts
Root component: src/app/app.component.ts

Angular Environment Setup & Your First App

Prerequisites

Install the Angular CLI

Create a New Project

Project Structure

Your First Component

Generate Files with the CLI

Useful CLI Commands

Standalone vs. Module-based

VS Code Setup

Quick Reference

Enjoyed this article?

Leave a comment