Dataczwartek, 13 sierpnia 2026 Czas17:56:04
← Aplikacje webowe

Lekcja 5. Node.js — środowisko uruchomieniowe JavaScript i npm

Średni

Po co się tego uczymy?

Widziałeś już w poprzedniej lekcji polecenie "ng generate component" wpisywane w terminalu. Żeby to w ogóle zadziałało, komputer potrzebuje Node.js — silnika, który pozwala uruchamiać kod JavaScript/TypeScript POZA przeglądarką. Bez Node.js narzędzia Angulara (Angular CLI) w ogóle by nie istniały. Ta lekcja tłumaczy, czym jest Node.js, po co jest potrzebny, i jak korzystać z jego menedżera pakietów — npm.

Teoria

Czym jest Node.js? To środowisko uruchomieniowe (runtime) pozwalające wykonywać kod JavaScript POZA przeglądarką — bezpośrednio na komputerze, jak zwykły program. Zbudowane jest na silniku V8 (tym samym, którego używa przeglądarka Google Chrome do wykonywania JavaScriptu na stronach). Dzięki Node.js, JavaScript (a właściwie TypeScript, kompilowany do JavaScriptu) może służyć nie tylko do interaktywności na stronie, ale też do: uruchamiania narzędzi deweloperskich (jak Angular CLI), budowania/kompilowania projektów, a nawet pisania całych serwerów backendowych (choć w tym kursie backend piszemy w C#/ASP.NET Core, więc Node.js pełni tu rolę "narzędzia pomocniczego" dla Angulara, a nie właściwego backendu).

npm (Node Package Manager) to menedżer pakietów dołączony domyślnie do Node.js — pozwala pobierać i instalować gotowe biblioteki (pakiety) napisane przez innych programistów, zamiast pisać wszystko od zera. To bezpośredni odpowiednik NuGet z C# (którego używałeś przy instalowaniu np. sqlite-net-pcl w dziale MAUI) — tylko dla świata JavaScript/TypeScript.

Polecenie Działanie
node -v sprawdza zainstalowaną wersję Node.js
npm -v sprawdza zainstalowaną wersję npm
npm install nazwa-pakietu instaluje konkretny pakiet w BIEŻĄCYM projekcie (zapisuje go w package.json)
npm install -g nazwa-pakietu instaluje pakiet GLOBALNIE, dostępny z każdego miejsca w terminalu (tak instaluje się np. Angular CLI: npm install -g @angular/cli)
npm install (bez nazwy pakietu) instaluje WSZYSTKIE zależności wymienione w pliku package.json danego projektu — pierwsza rzecz, którą się robi po pobraniu/sklonowaniu cudzego projektu Angular
npm start / npm run build uruchamia predefiniowane w package.json "skrypty" — np. uruchomienie serwera deweloperskiego albo zbudowanie finalnej wersji aplikacji

Plik package.json to serce każdego projektu Node.js/Angular — zawiera listę WSZYSTKICH zależności (bibliotek) projektu wraz z ich wersjami, oraz zdefiniowane skrypty (polecenia) do uruchamiania różnych czynności (start, build, test). To dokładnie ten sam pomysł co plik .csproj w projektach C#, tylko w formacie JSON zamiast XML.

Skąd wziąć Node.js? Instalator pobiera się z oficjalnej strony nodejs.org — zaleca się wersję oznaczoną LTS (Long Term Support — długoterminowe wsparcie), bardziej stabilną niż najnowsza wersja "Current". Po instalacji Node.js i npm są dostępne z dowolnego terminala w systemie, w tym z terminala wbudowanego w Visual Studio 2026.

Rola Node.js w TYM konkretnym kursie. Ważne rozróżnienie: w niektórych projektach (i w informatorze CKE, jako jedna z trzech opcji backendu) Node.js jest używany do napisania CAŁEGO serwera backendowego. W TYM kursie backend piszemy w ASP.NET Core (C#) — Node.js pełni tu rolę WSPIERAJĄCĄ: uruchamia narzędzia budujące Angulara (Angular CLI, kompilator TypeScript, serwer deweloperski ng serve).

Schemat

Komputer (system operacyjny)
        │
        │  instalacja: nodejs.org (wersja LTS)
        ▼
Node.js (silnik V8 - wykonuje JavaScript poza przeglądarką)
        │
        ├── npm (menedżer pakietów, wbudowany w Node.js)
        │       │
        │       │  npm install -g @angular/cli
        │       ▼
        │   Angular CLI (polecenie "ng" dostępne globalnie)
        │
        └── package.json (w każdym projekcie Angular)
                │  npm install  → pobiera WSZYSTKIE zależności z tego pliku
                ▼
        node_modules/ (folder z pobranymi bibliotekami — NIE commituje się do Git!)

W TYM kursie: Node.js = narzędzie pomocnicze dla Angulara
              ASP.NET Core (C#) = właściwy backend

Przykład z życia

Node.js to trochę jak silnik w warsztacie stolarskim, który napędza różne narzędzia (piły, wiertarki) — sam w sobie nie buduje mebli, ale bez niego żadne z tych narzędzi by nie działało. Dokładnie tak samo, Node.js sam nie buduje Twojej aplikacji Angular, ale bez niego polecenia ng generate, ng serve czy npm install w ogóle by nie zadziałały.

Terminal — podstawowe polecenia Node.js i npm

# Sprawdzenie instalacji
node -v
npm -v

# Instalacja Angular CLI globalnie (raz, na całym komputerze)
npm install -g @angular/cli
ng version

# W folderze konkretnego projektu Angular:
npm install                    # pobiera wszystkie zależności z package.json
npm start                      # uruchamia serwer deweloperski (ng serve)

# Instalacja pojedynczego dodatkowego pakietu (przykład z lekcji 4)
npm install @angular/forms

Komentarz i wyjaśnienie kodu

Polecenie npm install (bez podanej nazwy pakietu) czyta plik package.json w BIEŻĄCYM folderze i pobiera WSZYSTKIE wymienione tam zależności do folderu node_modules/ — to pierwszy krok po pobraniu/sklonowaniu jakiegokolwiek cudzego projektu Angular z internetu (np. z repozytorium Git), bo sam kod źródłowy NIE zawiera tych bibliotek (są zbyt duże i łatwe do pobrania na nowo), tylko ICH LISTĘ.

npm install -g (flaga -g od "global") instaluje narzędzie DOSTĘPNE z każdego folderu w terminalu — używa się jej dla narzędzi wiersza poleceń (jak Angular CLI), w odróżnieniu od zwykłego npm install (bez -g), które instaluje bibliotekę TYLKO dla jednego, konkretnego projektu.

Ćwiczenie samodzielne

Otwórz terminal (w Visual Studio albo systemowy) i wykonaj po kolei: node -v, npm -v, ng version. Zapisz wszystkie trzy wersje. Następnie otwórz plik package.json w projekcie klienckim z lekcji 3 i znajdź w nim sekcję "dependencies" — policz, ile bibliotek jest tam wymienionych.

Zadania do pracy własnej

  1. Sprawdź w dokumentacji na nodejs.org, jaka jest różnica między wersją "LTS" a "Current" — zapisz od siebie, którą i dlaczego poleciłbyś początkującemu koledze z klasy.

  2. Usuń (tymczasowo, np. przenosząc w inne miejsce) folder node_modules z dowolnego projektu Angular, spróbuj go uruchomić (powinien zgłosić błąd braku zależności), a następnie napraw to poleceniem npm install — opisz, co się stało krok po kroku.

  3. Zainstaluj globalnie dowolne inne narzędzie CLI oparte na Node.js (np. npm install -g http-server) i użyj go do wystawienia dowolnego prostego pliku HTML jako lokalnej stronki dostępnej pod adresem localhost — opisz, na czym polegała różnica między tym poleceniem a znanym Ci już ng serve.

Typowe błędy

Commitowanie folderu node_modules/ do repozytorium Git — ten folder bywa OGROMNY (dziesiątki tysięcy plików) i jest w pełni ODTWARZALNY poleceniem npm install z pliku package.json; profesjonalne projekty zawsze mają go w pliku .gitignore.

Mylenie instalacji GLOBALNEJ (-g) z lokalną — próba wywołania ng w terminalu bez wcześniejszej globalnej instalacji Angular CLI zwróci błąd "polecenie nie znalezione", nawet jeśli Angular jest zainstalowany lokalnie w jakimś konkretnym projekcie.

Instalacja bardzo starej albo bardzo nowej (niestabilnej) wersji Node.js — Angular ma konkretne, udokumentowane wymagania co do wspieranych wersji Node.js; zbyt stara wersja może uniemożliwić instalację najnowszego Angulara.

Nawiązanie do egzaminu zawodowego

To realizacja INF.04.7.2 (Node.js jako jeden z wymienionych wprost frameworków/narzędzi w podstawie programowej) — w tym kursie w roli narzędzia wspierającego Angulara, a nie samodzielnego backendu (tę rolę pełni ASP.NET Core, lekcja 12). Kolejna lekcja przechodzi do samego języka, w którym pisze się kod Angulara — TypeScript.