Lekcja 5. Node.js — środowisko uruchomieniowe JavaScript i npm
ŚredniPo 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
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.
Usuń (tymczasowo, np. przenosząc w inne miejsce) folder
node_modulesz dowolnego projektu Angular, spróbuj go uruchomić (powinien zgłosić błąd braku zależności), a następnie napraw to poleceniemnpm install— opisz, co się stało krok po kroku.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 adresemlocalhost— 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.