Hoe Angular CLI te installeren op Linux

Angular is een open-source, populair en zeer uitbreidbaar framework voor de ontwikkeling van front-end toepassingen, gebruikt voor het bouwen van mobiele en webapplicaties met behulp van TypeScript/JavaScript en andere gangbare talen.

Angular is een overkoepelende term voor alle versies van Angular die na AngularJS (of Angular versie 1.0) komen, inclusief Angular 2 en Angular 4.

Angular is goed geschikt voor het bouwen van kleine tot grootschalige applicaties vanaf nul. Een van de belangrijke componenten van het Angular-platform om de ontwikkeling van applicaties te ondersteunen, is het hulpprogramma Angular CLI – het is een eenvoudige en gebruiksvriendelijke command-line tool die wordt gebruikt om Angular-applicaties te maken, te beheren, te bouwen en te testen.

In dit artikel zullen we uitleggen hoe je het opdrachtregelhulpprogramma Angular installeert op een Linux-systeem en enkele basisvoorbeelden van dit hulpprogramma leert.

Node.js installeren in Linux

Om Angular CLI te installeren, moet je de nieuwste versie van Node.js en NPM geïnstalleerd hebben op je Linux-systeem.

Node.js installeren op 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

Node.js installeren op 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

Installeer Node.js op 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

Ook, om native add-ons van NPM te compileren en installeren, moet je mogelijk ontwikkelingstools installeren op je systeem zoals hieronder wordt weergegeven.

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

Angular CLI installeren in Linux

Zodra je Node.js en NPM hebt geïnstalleerd, zoals hierboven weergegeven, kun je Angular CLI installeren met behulp van de npm-pakketbeheerder zoals hieronder wordt weergegeven (de -g-vlag betekent dat het gereedschap systeembreed wordt geïnstalleerd om door alle systeemgebruikers te worden gebruikt).

# npm install -g @angular/cli
OR
$ sudo npm install -g @angular/cli
Install Angular CLI on Linux

Je kunt de Angular CLI starten met behulp van het ng-uitvoerbaar bestand dat nu op je systeem moet zijn geïnstalleerd. Voer het volgende commando uit om de geïnstalleerde versie van Angular CLI te controleren.

# ng version
OR
# ng --version
Check the Version of ng

Het maken van een Angular-project met Angular CLI

In dit gedeelte laten we zien hoe je een nieuw, basis Angular-project kunt maken, bouwen en bedienen. Ga eerst naar de webroot-directory van je server, initialiseer vervolgens een nieuw Angular-project als volgt (onthoud om de instructies te volgen):

# cd /var/www/html/
# ng new tecmint-app			#as root
OR
$ sudo ng new tecmint-app		#non-root user
Create New Angular App

Ga vervolgens naar de zojuist aangemaakte toepassingsdirectory en bedien de toepassing zoals hieronder wordt weergegeven.

# cd tecmint-app
# ls 			#list project files
# ng serve
Serve Angular App

Voordat je je nieuwe app kunt openen vanuit een webbrowser, als je een firewall-service hebt draaien, moet je poort 4200 openen in de firewallconfiguratie zoals hieronder wordt weergegeven.

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

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

Je kunt nu een webbrowser openen en navigeren naar het volgende adres om de nieuwe app te zien draaien zoals getoond in de volgende screenshot.

http://localhost:4200/ 
or 
http://SERVER_IP:4200 
Access Your New Angular App

Opmerking: Als je het commando ng serve gebruikt om een applicatie te bouwen en lokaal te draaien, zoals hierboven weergegeven, bouwt de server automatisch de app opnieuw en laadt de webpagina(‘s) opnieuw in wanneer je een van de bronbestanden wijzigt.

Voor meer informatie over de ng tool, voer het volgende commando uit.

# ng help

De Angular CLI Homepage: https://angular.io/cli

In dit artikel hebben we laten zien hoe je Angular CLI kunt installeren op verschillende Linux-distributies. We hebben ook behandeld hoe je een basis Angular-applicatie kunt bouwen, compileren en draaien op een ontwikkelingsserver. Voor eventuele vragen of gedachten die je met ons wilt delen, gebruik het onderstaande feedbackformulier.

Source:
https://www.tecmint.com/install-angular-cli-on-linux/