Angular CLI - Jak utworzyć nowy projekt Angular w systemie Linux
Angular to popularny i wysoce rozszerzalny framework do tworzenia aplikacji typu open source, używany do tworzenia aplikacji mobilnych i internetowych przy użyciu TypeScript/JavaScript i inne popularne języki.
Angular to ogólny termin określający wszystkie wersje Angular, które pojawiają się po AngularJS (lub wersji Angular 1.0), w tym Angular 2 i Angular 4.
Angular doskonale nadaje się do tworzenia od podstaw aplikacji o małej i dużej skali. Jednym z kluczowych komponentów platformy Angular wspomagającym tworzenie aplikacji jest narzędzie Angular CLI – jest to proste i łatwe w użyciu narzędzie wiersza poleceń służące do tworzenia , zarządzaj, buduj i testuj aplikacje Angular.
W tym artykule wyjaśnimy, jak zainstalować narzędzie wiersza poleceń Angular w systemie Linux i poznamy kilka podstawowych przykładów tego narzędzia.
Instalowanie Node.js w systemie Linux
Aby zainstalować Angular CLI, musisz mieć zainstalowaną najnowszą wersję Node.js i NPM w swoim systemie Linux.
Zainstaluj Node.js na Ubuntu
------------- For Node.js v19.x -------------
curl -fsSL https://deb.nodesource.com/setup_19.x | sudo -E bash - &&\
sudo apt-get install -y nodejs
------------- For Node.js v18.x -------------
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - &&\
sudo apt-get install -y nodejs
------------- For Node.js v16.x -------------
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - &&\
sudo apt-get install -y nodejs
------------- For Node.js v14.x -------------
curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash - &&\
sudo apt-get install -y nodejs
Zainstaluj Node.js na Debianie
------------- For Node.js v19.x -------------
curl -fsSL https://deb.nodesource.com/setup_19.x | bash - &&\
sudo apt-get install -y nodejs
------------- For Node.js v18.x -------------
curl -fsSL https://deb.nodesource.com/setup_18.x | bash - &&\
sudo apt-get install -y nodejs
------------- For Node.js v16.x -------------
curl -fsSL https://deb.nodesource.com/setup_16.x | bash - &&\
sudo apt-get install -y nodejs
------------- For Node.js v14.x -------------
curl -fsSL https://deb.nodesource.com/setup_14.x | bash - &&\
sudo apt-get install -y nodejs
Zainstaluj Node.js na systemach RHEL, CentOS, Fedora, Rocky i Alma Linux
------------- For Node.js v19.x -------------
curl -fsSL https://rpm.nodesource.com/setup_19.x | sudo bash -
sudo yum install -y nodejs
------------- For Node.js v18.x -------------
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install -y nodejs
------------- For Node.js v16.x -------------
curl -fsSL https://rpm.nodesource.com/setup_16.x | sudo bash -
sudo yum install -y nodejs
------------- For Node.js v14.x -------------
curl -fsSL https://rpm.nodesource.com/setup_14.x | sudo bash -
sudo yum install -y nodejs
Ponadto, aby skompilować i zainstalować natywne dodatki z NPM, może być konieczne zainstalowanie w systemie narzędzi programistycznych w następujący sposób.
sudo apt install -y build-essential [On Debian/Ubuntu]
sudo yum install gcc-c++ make [On RHEL Systems]
Instalowanie Angular CLI w systemie Linux
Po zainstalowaniu Node.js i NPM, jak pokazano powyżej, możesz zainstalować Angular CLI za pomocą menedżera pakietów npm w następujący sposób (flaga -g oznacza instalację narzędzia w całym systemie, z którego będą mogli korzystać wszyscy użytkownicy systemu).
npm install -g @angular/cli
OR
sudo npm install -g @angular/cli
Możesz uruchomić Angular CLI za pomocą pliku wykonywalnego ng, który powinien być teraz zainstalowany w twoim systemie. Uruchom następujące polecenie, aby sprawdzić zainstalowaną wersję Angular CLI.
ng version
OR
ng --version
Tworzenie projektu Angular przy użyciu Angular CLI
W tej sekcji pokażemy, jak stworzyć, zbudować i obsłużyć nowy, podstawowy projekt Angular. Najpierw przejdź do katalogu webroot na swoim serwerze, a następnie zainicjuj nową aplikację Angular w następujący sposób (pamiętaj, aby postępować zgodnie z instrukcjami):
cd /var/www/html/
ng new tecmint-app #as root
OR
sudo ng new tecmint-app #non-root user
Następnie przejdź do katalogu aplikacji, który właśnie został utworzony i obsłuż aplikację, jak pokazano.
cd tecmint-app
ls #list project files
ng serve
Jeśli masz uruchomioną usługę zapory sieciowej, zanim będziesz mógł uzyskać dostęp do nowej aplikacji z przeglądarki internetowej, musisz otworzyć port 4200 w konfiguracji zapory, jak pokazano.
---------- On Firewalld ----------
firewall-cmd --permanent --zone=public --add-port=4200/tcp
firewall-cmd --reload
---------- On UFW ----------
sudo ufw allow 4200/tcp
sudo ufw reload
Teraz możesz otworzyć przeglądarkę internetową i nawigować pod następującym adresem, aby zobaczyć działanie nowej aplikacji, jak pokazano na poniższym zrzucie ekranu.
http://localhost:4200/
or
http://SERVER_IP:4200
Uwaga: jeśli użyjesz polecenia ng służyć do zbudowania aplikacji i udostępnienia jej lokalnie, jak pokazano powyżej, serwer automatycznie odbuduje aplikację i ponownie ładuje strony internetowe po zmianie dowolnego pliku źródłowego.
Aby uzyskać więcej informacji na temat narzędzia, uruchom następujące polecenie.
ng help
Strona główna Angular CLI: https://angular.io/cli
W tym artykule pokazaliśmy, jak zainstalować Angular CLI w różnych dystrybucjach Linuksa. Omówiliśmy także, jak budować, kompilować i udostępniać podstawową aplikację Angular na serwerze deweloperskim. W przypadku jakichkolwiek pytań lub przemyśleń, którymi chcesz się z nami podzielić, skorzystaj z poniższego formularza opinii.