Instalacja Angulara

Wprowadzenie

Angular to potężne narzędzie do tworzenia dynamicznych aplikacji internetowych, oferujące bogaty zestaw funkcji i narzędzi dla programistów. W tym przewodniku przeprowadzimy Cię przez proces instalacji Angular 20 – najnowszej wersji frameworka.

Wymagania systemowe

Minimalne wymagania dla Angular 20:

Krok 1: Instalacja Node.js

Windows i macOS:

1. Przejdź na stronę nodejs.org
2. Pobierz wersję LTS (Long Term Support) – obecnie 20.x
3. Uruchom instalator i postępuj zgodnie z instrukcjami
4. WAŻNE: Zaznacz opcję „Add to PATH” podczas instalacji

Weryfikacja instalacji:

# Sprawdzenie wersji Node.js
node --version
# Powinno wyświetlić: v20.x.x

# Sprawdzenie wersji npm
npm --version
# Powinno wyświetlić: 10.x.x

Krok 2: Instalacja Angular CLI w wersji 20

Angular CLI (Command Line Interface) to narzędzie wiersza poleceń niezbędne do pracy z Angularem.

Instalacja globalna Angular CLI:

# Instalacja najnowszej wersji Angular CLI (20.x)
npm install -g @angular/cli@20

# Alternatywnie - instalacja konkretnej wersji
npm install -g @angular/cli@20.0.0

Weryfikacja instalacji:

# Sprawdzenie wersji Angular CLI
ng version

# Powinno wyświetlić informacje podobne do:
# Angular CLI: 20.0.x
# Node: 20.x.x
# Package Manager: npm 10.x.x

Krok 3: Rozwiązywanie problemów (Windows)

Problem: „ng nie jest rozpoznawane jako polecenie”

Jeśli po instalacji polecenie ng nie działa, prawdopodobnie ścieżka npm nie jest dodana do PATH.

Rozwiązanie dla Windows 10/11:

Znajdź lokalizację npm:

npm config get prefix

Zazwyczaj zwraca: C:\Users\[nazwa_użytkownika]\AppData\Roaming\npm

Dodaj do zmiennych środowiskowych:

• Naciśnij Windows + X → wybierz „System”
• Kliknij „Zaawansowane ustawienia systemu”
• Kliknij przycisk „Zmienne środowiskowe”
• W sekcji „Zmienne użytkownika” znajdź Path
• Kliknij „Edytuj” → „Nowy”
• Dodaj ścieżkę: C:\Users\[nazwa_użytkownika]\AppData\Roaming\npm
• Kliknij „OK” we wszystkich oknach

Restart terminala – zamknij i otwórz ponownie terminal

Krok 4: Tworzenie pierwszego projektu Angular 20

Utworzenie nowego projektu:

# Podstawowe polecenie
ng new moja-aplikacja

Opcje konfiguracyjne podczas tworzenia:

System zapyta o następujące opcje:

1. „Would you like to add Angular routing?”
   • Odpowiedź: Y (Yes) – dodaje system nawigacji
2. „Which stylesheet format would you like to use?”
   • Opcje: CSS, SCSS, Sass, Less
   • Zalecane: SCSS – bardziej zaawansowane style

Struktura utworzonego projektu:

moja-aplikacja/
├── src/                    # Kod źródłowy aplikacji
│   ├── app/               # Komponenty i logika
│   ├── assets/            # Obrazy, fonty, pliki statyczne
│   ├── environments/      # Konfiguracja środowisk
│   ├── index.html         # Główny plik HTML
│   ├── main.ts           # Punkt wejścia aplikacji
│   └── styles.scss       # Globalne style
├── angular.json          # Konfiguracja Angular
├── package.json          # Zależności projektu
├── tsconfig.json         # Konfiguracja TypeScript
└── README.md            # Dokumentacja projektu

Krok 5: Uruchamianie aplikacji

Przejście do katalogu projektu:

cd moja-aplikacja

Uruchomienie serwera deweloperskiego:

# Standardowe uruchomienie
ng serve

# Z automatycznym otwarciem przeglądarki
ng serve --open

# Na innym porcie (jeśli 4200 jest zajęty)
ng serve --port 4300

Dostęp do aplikacji:

• Domyślny adres: http://localhost:4200
• Aplikacja automatycznie się odświeża po zapisaniu zmian (Hot Reload)