Instalacja Angular CLI

Angular CLI (Command Line Interface) to Twoja kuźnia - narzędzie do tworzenia, budowania i zarządzania projektami Angular.

Wymagania Wstępne

Przed instalacją potrzebujesz:

• Node.js w aktualnej wersji LTS (22.12 lub nowszej; najnowsze Angular CLI nie działa już na Node.js 18)
• npm (instalowany razem z Node.js)

Sprawdź wersje:

node --version
# Powinno pokazać v22.12.0 lub nowszą

npm --version
# Powinno pokazać 10.x lub nowszą

Instalacja Angular CLI

Otwórz terminal i wpisz:

npm install -g @angular/cli

Flaga -g oznacza instalację globalną - CLI będzie dostępne z każdego miejsca w systemie.

Weryfikacja instalacji

ng version

Powinieneś zobaczyć informacje o zainstalowanej wersji Angular CLI oraz wspieranych wersjach Node.js i TypeScript.

Tworzenie Pierwszego Projektu

# Utwórz nowy projekt
ng new moje-dojo

# CLI zapyta o:
# ? Which stylesheet format would you like to use? (CSS, SCSS, Sass, Less)
# ? Do you want to enable Server-Side Rendering (SSR)? (y/N)

Zalecane odpowiedzi dla początkujących:

• Stylesheet: SCSS (większa elastyczność)
• SSR: Nie (na początek nie potrzebujemy)

Struktura Projektu

Po utworzeniu projektu zobaczysz:

moje-dojo/
├── src/
│   ├── app/
│   │   ├── app.component.ts      # Główny komponent
│   │   ├── app.component.html    # Szablon
│   │   ├── app.component.scss    # Style
│   │   ├── app.config.ts         # Konfiguracja
│   │   └── app.routes.ts         # Routing
│   ├── index.html                # Główny plik HTML
│   ├── main.ts                   # Punkt wejścia
│   └── styles.scss               # Globalne style
├── angular.json                  # Konfiguracja projektu
├── package.json                  # Zależności npm
└── tsconfig.json                 # Konfiguracja TypeScript

Uwaga: od Angular 20 CLI tworzy pliki bez przyrostka .component - zamiast app.component.ts zobaczysz app.ts z klasą App, a zamiast app.component.html plik app.html. Pliki pełnią te same role.

Uruchomienie Aplikacji

cd moje-dojo
ng serve

Aplikacja będzie dostępna pod adresem: http://localhost:4200

Przydatne flagi:

ng serve --open          # Automatycznie otwiera przeglądarkę
ng serve --port 3000     # Zmienia port
ng serve --watch         # Automatyczne odświeżanie (domyślnie włączone)