Angular CLI - Kako stvoriti novi Angular projekt u Linuxu


Angular je open-source, popularan i visoko proširiv front-end okvir za razvoj aplikacija, koji se koristi za izradu mobilnih i web aplikacija pomoću TypeScript/JavaScript i drugim uobičajenim jezicima.

Angular je krovni izraz za sve Angular verzije koje dolaze nakon AngularJS (ili Angular verzije 1.0) uključujući Angular 2 i Angular 4.

Angular je vrlo prikladan za izradu malih do velikih aplikacija od nule. Jedna od ključnih komponenti platforme Angular koja pomaže u razvoju aplikacija je uslužni program Angular CLI – to je jednostavan alat naredbenog retka koji se lako koristi za stvaranje , upravljanje, izrada i testiranje Angular aplikacija.

U ovom ćemo članku objasniti kako instalirati Angular alat naredbenog retka na Linux sustav i naučiti neke osnovne primjere ovog alata.

Instaliranje Node.js u Linuxu

Da biste instalirali Angular CLI, trebate imati najnoviju verziju Node.js i NPM instaliranu na vašem Linux sustavu.

Instalirajte 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

Instalirajte Node.js na Debian

------------- 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

Instalirajte Node.js na RHEL, CentOS, Fedora, Rocky & 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

Također, za kompajliranje i instaliranje izvornih dodataka iz NPM-a možda ćete morati instalirati razvojne alate na svoj sustav kako slijedi.

sudo apt install -y build-essential  [On Debian/Ubuntu]
sudo yum install gcc-c++ make        [On RHEL Systems]

Instaliranje Angular CLI u Linux

Nakon što instalirate Node.js i NPM, kao što je prikazano gore, možete instalirati Angular CLI pomoću npm upravitelja paketa kako slijedi (oznaka -g znači instalaciju alata za cijeli sustav kako bi ga koristili svi korisnici sustava).

npm install -g @angular/cli
OR
sudo npm install -g @angular/cli

Možete pokrenuti Angular CLI pomoću ng izvršne datoteke koja bi sada trebala biti instalirana na vašem sustavu. Pokrenite sljedeću naredbu da provjerite instaliranu verziju Angular CLI.

ng version
OR
ng --version

Stvaranje Angular projekta pomoću Angular CLI

U ovom odjeljku pokazat ćemo kako stvoriti, izgraditi i poslužiti novi, osnovni Angular projekt. Najprije prijeđite u direktorij webroot vašeg poslužitelja, zatim inicijalizirajte novu Angular aplikaciju na sljedeći način (ne zaboravite slijediti upute):

cd /var/www/html/
ng new tecmint-app			#as root
OR
sudo ng new tecmint-app		#non-root user

Zatim prijeđite u direktorij aplikacije koji je upravo kreiran i poslužite aplikaciju kako je prikazano.

cd tecmint-app
ls 			#list project files
ng serve

Prije nego što možete pristupiti svojoj novoj aplikaciji iz web-preglednika, ako imate pokrenutu uslugu vatrozida, morate otvoriti port 4200 u konfiguraciji vatrozida kao što je prikazano.

---------- On Firewalld ---------- 
firewall-cmd --permanent --zone=public --add-port=4200/tcp 
firewall-cmd --reload

---------- On UFW ----------
sudo ufw allow 4200/tcp
sudo ufw reload

Sada možete otvoriti web-preglednik i kretati se pomoću sljedeće adrese kako biste vidjeli kako se nova aplikacija pokreće kao što je prikazano na sljedećoj snimci zaslona.

http://localhost:4200/ 
or 
http://SERVER_IP:4200 

Napomena: Ako koristite naredbu ng serve za izradu aplikacije i njeno posluživanje lokalno, kao što je prikazano gore, poslužitelj automatski ponovno gradi aplikaciju i ponovno učitava web stranicu(e) kada promijenite bilo koju od izvornih datoteka.

Za više informacija o ng alatu pokrenite sljedeću naredbu.

ng help

Angular CLI početna stranica: https://angular.io/cli

U ovom smo članku pokazali kako instalirati Angular CLI na različite distribucije Linuxa. Također smo opisali kako izgraditi, kompajlirati i poslužiti osnovnu Angular aplikaciju na razvojnom poslužitelju. Za sve upite ili misli koje želite podijeliti s nama, upotrijebite obrazac za povratne informacije u nastavku.