Instalacja środowiska – krok po kroku

Node.js – pobieranie i instalacja

Angular nie działa bezpośrednio w przeglądarce podczas tworzenia – potrzebuje Node.js jako środowiska uruchomieniowego. Node.js to silnik, który pozwala uruchamiać JavaScript poza przeglądarką – na Twoim komputerze.

Krok 1 – Pobieranie instalatora

1. Otwórz przeglądarkę i wejdź na: https://nodejs.org
2. Na stronie głównej zobaczysz dwa przyciski do pobrania. Kliknij ten z napisem LTS (Long Term Support – wersja z długim wsparciem):

Krok 2 – Instalacja na Windows

1. Uruchom pobrany plik .msi (np. node-v22.x.x-x64.msi)
2. W oknie instalatora klikaj Next aż do końca
3. Na ekranie „Custom Setup” upewnij się, że zaznaczona jest opcja „Add to PATH” – to bardzo ważne!
4. Kliknij Install i poczekaj na zakończenie
5. Kliknij Finish

Weryfikacja instalacji

Po instalacji zawsze sprawdzamy, czy wszystko działa poprawnie. Otwieramy terminal i wpisujemy dwie komendy.

Jak otworzyć terminal w Windows: wciśnij Win + R, wpisz cmd i naciśnij Enter. Alternatywnie: kliknij prawym przyciskiem na pulpicie i wybierz „Otwórz w terminalu”.

# Sprawdzamy wersję Node.js
node -v
# Oczekiwany wynik, np:  v22.15.0

# Sprawdzamy wersję npm (menedżer pakietów)
npm -v
# Oczekiwany wynik, np:  10.9.2

Jeśli widzisz numery wersji – instalacja przebiegła pomyślnie. 🎉

C:\Users\Uczen> node -v
v22.15.0

C:\Users\Uczen> npm -v
10.9.2

C:\Users\Uczen> node -v
'node' is not recognized as an internal
or external command

Problem z PowerShell – polityka wykonywania skryptów

To najczęstszy problem, na który natkniesz się na komputerze szkolnym (i nie tylko). Windows domyślnie blokuje uruchamianie skryptów PowerShell – a Angular CLI jest właśnie takim skryptem. Na szczęście rozwiązanie jest proste.

Jak wygląda błąd?

Gdy wpisujesz jakąkolwiek komendę ng (np. ng version), terminal wyświetla następujący komunikat:

ng : File C:\Users\Uczen\AppData\Roaming\npm\ng.ps1 cannot be loaded
because running scripts is disabled on this system.
For more information, see about_Execution_Policies at
https:/go.microsoft.com/fwlink/?LinkID=135170.
At line:1 char:1
+ ng version
+ ~~
    + CategoryInfo : SecurityError: (:) []
    + FullyQualifiedErrorId : UnauthorizedAccess

Komunikat mówi nam wprost: skrypt ng.ps1 nie może być uruchomiony, bo polityka bezpieczeństwa systemu tego zabrania.

Rozwiązanie – zmiana polityki wykonywania skryptów

Metoda 1 – dla bieżącego użytkownika (zalecana na komputerach szkolnych):

1. Otwórz PowerShell (nie zwykłe CMD): wciśnij Win, wpisz „PowerShell”, kliknij prawym i wybierz „Uruchom jako administrator”
2. Wpisz poniższą komendę i naciśnij Enter:

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

# System zapyta o potwierdzenie – wpisz literę Y i naciśnij Enter
# Execution policy change...
# [Y] Yes  [N] No  → wpisz: Y

3. Zamknij PowerShell i otwórz go ponownie
4. Sprawdź, czy działa: wpisz ng version

Metoda 2 – jeśli metoda 1 nie zadziałała (brak uprawnień admina):

# Uruchom tę komendę BEZ administratora – dotyczy tylko Twojego konta
Set-ExecutionPolicy RemoteSigned -Scope Process

Instalacja Angular CLI

Angular CLI (Command Line Interface) to narzędzie wiersza poleceń, bez którego praca z Angularem byłaby bardzo trudna. Instalujemy je raz na cały komputer – potem działa dla wszystkich projektów.

Otwórz PowerShell i wpisz:

# Instalacja Angular CLI globalnie (raz na cały komputer)
npm install -g @angular/cli

# Flaga -g oznacza "globally" – dostępne wszędzie, nie tylko w jednym projekcie
# Instalacja trwa kilka minut – poczekaj aż skończy

Po zakończeniu sprawdź instalację:

ng version

# Oczekiwany wynik:
#      _                      _                 ____ _     ___
#     / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
#    / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
#   / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
#  /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
#                 |___/
#
# Angular CLI: 21.x.x
# Node: 22.x.x

Jeśli widzisz wielki napis Angular CLI z numerem wersji 21 – wszystko jest gotowe!

Tworzenie projektu – ng new

Teraz stwórzmy pierwszy projekt. Komenda ng new tworzy kompletny szkielet aplikacji Angularowej – wszystkie pliki, foldery i konfigurację.

Przejdź do folderu gdzie chcesz tworzyć projekty (np. Dokumenty) i wpisz:

# Przejście do folderu Dokumenty (opcjonalnie)
cd ~/Documents

# Tworzenie nowego projektu o nazwie "moja-aplikacja"
ng new moja-aplikacja

Pytania kreatora – co wybrać?

Angular CLI zada Ci kilka pytań. Oto jak na nie odpowiadać:

Po odpowiedzi na pytania Angular CLI automatycznie pobierze wszystkie potrzebne pakiety (może to potrwać 1–3 minuty). Zobaczysz w terminalu serię komunikatów zakończonych słowem ✔ Packages installed successfully.

Struktura projektu

Po stworzeniu projektu zobaczysz następującą strukturę folderów. Przejrzyj ją uważnie – będziemy pracować głównie w folderze src/app:

moja-aplikacja/
├── src/                        ← tutaj piszemy kod
│   ├── app/                    ← główny folder aplikacji
│   │   ├── app.component.html  ← szablon HTML głównego komponentu
│   │   ├── app.component.ts    ← logika głównego komponentu (TypeScript)
│   │   ├── app.component.css   ← style komponentu
│   │   └── app.config.ts       ← konfiguracja aplikacji (standalone)
│   ├── assets/                 ← obrazki, czcionki, pliki statyczne
│   ├── index.html              ← główny plik HTML (ładowany raz)
│   └── styles.css              ← globalne style CSS całej aplikacji
├── angular.json                ← konfiguracja projektu Angular
├── package.json                ← lista zależności (bibliotek)
└── tsconfig.json               ← konfiguracja TypeScript

Instalacja Bootstrap 5

Bootstrap to biblioteka CSS, która dostarcza gotowe style dla przycisków, formularzy, kart, siatek i setek innych elementów. Dzięki niej aplikacja od razu wygląda profesjonalnie – bez pisania CSS od zera.

Krok 1 – Instalacja pakietu

Wejdź do folderu swojego projektu (jeśli jeszcze nie jesteś) i zainstaluj Bootstrap:

# Wejdź do folderu projektu
cd moja-aplikacja

# Zainstaluj Bootstrap
npm install bootstrap

Krok 2 – Podłączenie Bootstrap do projektu

Sama instalacja nie wystarczy – musimy powiedzieć Angularowi, żeby załadował plik CSS z Bootstrapa. Otwórz plik src/styles.css i dodaj na górze:

/* Importujemy Bootstrap – ta linia MUSI być pierwsza */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

/* Tutaj możesz dodawać własne globalne style */

Krok 3 – Weryfikacja

Otwórz plik src/app/app.component.html, usuń całą domyślną zawartość i wpisz testowy kod:

<div class="container mt-4">
  <h1 class="text-primary">Moja pierwsza aplikacja Angular!</h1>
  <p class="lead">Bootstrap działa poprawnie.</p>
  <button class="btn btn-success">Kliknij mnie</button>
</div>

Jeśli po uruchomieniu aplikacji (patrz sekcja 7) zobaczysz niebieski nagłówek i zielony przycisk – Bootstrap działa!

Uruchomienie aplikacji – ng serve

Aplikacja jest gotowa. Uruchamiamy ją komendą ng serve – Angular startuje lokalny serwer deweloperski i każda zmiana w kodzie odświeża aplikację automatycznie.

# Upewnij się, że jesteś w folderze projektu
cd moja-aplikacja

# Uruchom serwer deweloperski
ng serve

# Oczekiwany wynik:
# ✔ Browser application bundle generation complete.
# Watch mode enabled. Watching for file changes...
# ➜  Local:   http://localhost:4200/

Otwórz przeglądarkę i wejdź na adres: http://localhost:4200