[Setup] Angular Dictionary Development Environment

# -------------------------------------------------------
# 1. Install Node.js
# -------------------------------------------------------
# Download the LTS version from the official site (https://nodejs.org/)
# Alternatively, you can install it using nvm (Node Version Manager)

# Using nvm (macOS / Linux):
# curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash
# nvm install --lts
# nvm use --lts

# Verify the installation
node -v   # e.g.: v22.x.x
npm -v    # e.g.: 10.x.x

# -------------------------------------------------------
# 2. Install Angular CLI globally
# -------------------------------------------------------
# Install Angular CLI system-wide using npm's -g flag
npm install -g @angular/cli

# Verify the version
ng version

# -------------------------------------------------------
# 3. Create a new Angular project
# -------------------------------------------------------
# Generate a project scaffold with the ng new command
# The project name can be anything (e.g., my-app)
ng new my-app

# A dialog appears (main choices):
#   Which stylesheet format would you like to use?
#     → Choose from CSS / SCSS / Sass / Less (CSS is fine if unsure)
#   Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)?
#     → Choosing No at first gives a simpler configuration

# -------------------------------------------------------
# 4. Start the development server
# -------------------------------------------------------
# Move to the project directory
cd my-app

# Start the development server with the ng serve command
# By default, it is published at http://localhost:4200/
ng serve

# Add the --open option to open the browser automatically
ng serve --open

An example of the flow from creating a project to starting the development server, along with the content of the auto-generated root component file.

# -------------------------------------------------------
# Create a project (with SCSS and routing)
# -------------------------------------------------------
ng new my-app --style=scss --routing

# Move to the project directory
cd my-app

# Start the development server and open the browser
ng serve --open

# -------------------------------------------------------
# Example content of the auto-generated src/app/app.component.ts
# -------------------------------------------------------
# Standalone components are the default since Angular 17

// app.component.ts
// The root component of the application.
// The 'app-root' specified in selector corresponds to <app-root></app-root> in index.html

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

@Component({
  selector: 'app-root',       // Tag name used in the HTML template
  standalone: true,           // Standalone component that works without NgModule
  imports: [RouterOutlet],    // Import to use <router-outlet> from the router
  templateUrl: './app.component.html',   // Path to the template file
  styleUrl: './app.component.scss',      // Path to the style file
})
export class AppComponent {
  // Write component logic here
  title = 'my-app';  // Can be referenced from the template with {{ title }}
}

# -------------------------------------------------------
# Main file structure (immediately after ng new)
# -------------------------------------------------------
# src/
#   app/
#     app.component.ts        … Root component (class definition)
#     app.component.html      … Root component template
#     app.component.scss      … Root component styles
#     app.component.spec.ts   … Root component test file
#     app.routes.ts           … Routing definition (when --routing is specified)
#     app.config.ts           … Application configuration (provideRouter, etc.)
#   main.ts                   … Application entry point
#   index.html                … HTML template returned to the browser
# angular.json                … Angular CLI project configuration file
# package.json                … npm package definition
# tsconfig.json               … TypeScript compiler configuration

Setting up the Angular environment starts with installing Node.js. Installing Node.js also makes npm (the package manager) available. Next, globally install the Angular CLI with npm install -g @angular/cli, and create a new project with ng new projectName. After project creation, running ng serve immediately starts the development server, which detects file changes and enables Hot Module Replacement (HMR) for automatic reloading.

Since Angular 17, Standalone components are the default, making the standard configuration simpler without using NgModule. The generated src/app/app.component.ts has standalone: true set and works without @NgModule. Subcommands like ng generate component and ng generate service can be used to generate components, services, and routes.

For multi-page configurations using routing, see Routing. For the basic structure of components, see Component.