Angular Getting Started - Setup & Project Creation

This guide explains Angular development environment setup and basic project structure for developers with React/Next.js experience.

1. Installing Angular CLI

Angular CLI is the official tool for creating, building, testing, and deploying projects from the command line.

Installation

# Global install
npm install -g @angular/cli

# Verify version
ng version

Comparison with React/Next.js

Operation	Angular	React / Next.js
CLI Install	npm install -g @angular/cli	Not needed (run directly with npx)
Create Project	ng new my-app	npx create-next-app my-app
Generate Component	ng generate component my-comp	Manual creation
Dev Server	ng serve	next dev

Global installation is recommended for Angular CLI, but you can also use it via npx: npx @angular/cli new my-app.

2. Creating a Project

The ng new Command

ng new my-angular-app

You'll be prompted interactively for the following options:

Option	Description	Recommended
Stylesheet format	CSS / SCSS / Sass / Less	SCSS (most common in practice)
SSR (Server-Side Rendering)	Enable SSR and SSG (Static Site Generation)	Choose based on project needs

Common Options

# Create with SCSS and no SSR
ng new my-app --style=scss --ssr=false

# Dry run (preview without generating files)
ng new my-app --dry-run

Comparison with Next.js

With Next.js, npx create-next-app prompts you to select App Router / Pages Router, Tailwind CSS, ESLint, and whether to use a src/ directory. Angular offers similar customization through ng new options.

3. Understanding Project Structure

Here's the main directory and file structure generated by ng new:

my-angular-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts      # Root component
│   │   ├── app.component.html    # Template
│   │   ├── app.component.scss    # Styles
│   │   ├── app.component.spec.ts # Tests
│   │   ├── app.config.ts         # Application configuration
│   │   └── app.routes.ts         # Routing configuration
│   ├── index.html                # Entry point HTML
│   ├── main.ts                   # Bootstrap
│   └── styles.scss               # Global styles
├── angular.json                  # Angular CLI configuration
├── tsconfig.json                 # TypeScript configuration
├── tsconfig.app.json             # App TypeScript config
├── tsconfig.spec.json            # Test TypeScript config
└── package.json                  # Dependencies

File Roles

File	Role	Next.js Equivalent
angular.json	Centralizes build, serve, test configurations	next.config.js
main.ts	Application bootstrap entry point	Auto-handled (not needed)
app.config.ts	Provider and routing configuration	Part of layout.tsx
app.routes.ts	Route definitions	File-system routing
app.component.ts	Root component	layout.tsx / page.tsx

Structural Differences from Next.js

• Next.js: The file structure under app/ maps directly to URL routing (file-system based).
• Angular: Routes are explicitly defined in app.routes.ts (configuration based). Components work regardless of where they're placed.

4. Development Server and Build

Development Server

# Start on default port (http://localhost:4200)
ng serve

# Specify port
ng serve --port 3000

# Auto-open browser
ng serve --open

Build

# Production build
ng build

# Output: dist/my-angular-app/

Command	Angular	Next.js
Dev Server	ng serve	next dev
Build	ng build	next build
Output	dist/	.next/
Preview	Serve statically after build	next start

Environment Variables

Angular uses environment.ts files to manage per-environment configuration.

src/environments/environment.ts

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api'
};

src/environments/environment.prod.ts

export const environment = {
  production: true,
  apiUrl: 'https://api.example.com'
};

src/app/some.service.ts

import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class ApiService {
  private apiUrl = environment.apiUrl;
}

The fileReplacements setting in angular.json automatically swaps in the production file at build time.

Comparison with Next.js

Next.js manages environment variables via .env.local / .env.production and the NEXT_PUBLIC_ prefix. Angular uses TypeScript files for environment configuration, providing the benefit of type-safe access.

5. Basic angular.json Configuration

angular.json is the central configuration file for the entire Angular project, consolidating build, serve, and test settings.

Key Sections

angular.json (key sections)

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.scss"],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kB",
                  "maximumError": "1MB"
                }
              ],
              "outputHashing": "all"
            }
          }
        },
        "serve": {
          "options": {
            "port": 4200
          }
        }
      }
    }
  }
}

Important Settings

Setting	Description
outputPath	Build output directory
assets	Static files copied as-is during build
styles	Global stylesheets
scripts	Globally loaded JS files
budgets	Bundle size limits (warns/errors when exceeded)
fileReplacements	Per-environment file swaps

Comparison with Next.js

Next.js uses next.config.js to configure Webpack, redirects, image optimization, etc. Angular's angular.json is a more comprehensive configuration file that also includes test and lint settings.

6. Key Differences from React/Next.js (Overview)

Opinionated vs Flexible

Aspect	Angular	Next.js
Design Philosophy	Opinionated (convention-driven)	Flexible
Routing	Built-in (@angular/router)	Built-in (file-system based)
Form Management	Built-in (ReactiveFormsModule)	External libraries (React Hook Form, etc.)
HTTP Communication	Built-in (HttpClient)	External libraries (fetch, axios, etc.)
Dependency Injection	Built-in DI system	None (manual or Context API)
State Management	RxJS + Signals	Choose from Redux, Zustand, Jotai, etc.

TypeScript-First Design

Angular was designed from the ground up with TypeScript, fully leveraging features like decorators, interfaces, and generics. Next.js also has strong TypeScript support, but development with JavaScript is possible.

Development Experience Differences

• Angular: The CLI is powerful — ng generate auto-generates boilerplate for components, services, modules, etc. The unified structure makes it well-suited for large team development.
• Next.js: Development starts quickly — simply creating a file sets up routing. The high degree of freedom makes it important to unify coding conventions within the team.