Recherche de site Web

Angular CLI - Comment créer un nouveau projet angulaire sous Linux


Angular est un framework de développement d'applications frontales open source, populaire et hautement extensible, utilisé pour créer des applications mobiles et Web à l'aide de TypeScript/JavaScript et d’autres langages courants.

Angular est un terme générique désignant toutes les versions Angular qui suivent AngularJS (ou Angular version 1.0), y compris Angular 2. , et Angular 4.

Angular est bien adapté à la création d'applications à petite ou grande échelle à partir de zéro. L'un des composants clés de la plate-forme Angular pour faciliter le développement d'applications est l'utilitaire Angular CLI : il s'agit d'un outil en ligne de commande simple et facile à utiliser utilisé pour créer , gérez, créez et testez des applications angulaires.

Dans cet article, nous expliquerons comment installer l'outil de ligne de commande Angular sur un système Linux et apprendrons quelques exemples de base de cet outil.

Installer Node.js sous Linux

Pour installer Angular CLI, vous devez disposer de la dernière version de Node.js et de NPM installée sur votre système Linux.

Installez Node.js sur 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

Installer Node.js sur 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

Installez Node.js sur RHEL, CentOS, Fedora, Rocky et 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

De plus, pour compiler et installer des modules complémentaires natifs de NPM, vous devrez peut-être installer les outils de développement sur votre système comme suit.

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

Installation de la CLI angulaire sous Linux

Une fois Node.js et NPM installés, comme indiqué ci-dessus, vous pouvez installer l'Angular CLI à l'aide du gestionnaire de packages npm. comme suit (l'indicateur -g signifie installer l'outil à l'échelle du système pour qu'il soit utilisé par tous les utilisateurs du système).

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

Vous pouvez lancer la Angular CLI à l'aide de l'exécutable ng qui devrait maintenant être installé sur votre système. Exécutez la commande suivante pour vérifier la version de Angular CLI installée.

ng version
OR
ng --version

Création d'un projet angulaire à l'aide de la CLI angulaire

Dans cette section, nous montrerons comment créer, construire et servir un nouveau projet Angular de base. Tout d'abord, accédez au répertoire webroot de votre serveur, puis initialisez une nouvelle application Angular comme suit (n'oubliez pas de suivre les instructions) :

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

Ensuite, accédez au répertoire d'application qui vient d'être créé et servez l'application comme indiqué.

cd tecmint-app
ls 			#list project files
ng serve

Avant de pouvoir accéder à votre nouvelle application à partir d'un navigateur Web, si un service de pare-feu est en cours d'exécution, vous devez ouvrir le port 4200 dans la configuration du pare-feu, comme indiqué.

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

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

Vous pouvez maintenant ouvrir un navigateur Web et naviguer en utilisant l'adresse suivante pour voir la nouvelle application s'exécuter comme indiqué dans la capture d'écran suivante.

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

Remarque : Si vous utilisez la commande ng serve pour créer une application et la servir localement, comme indiqué ci-dessus, le serveur reconstruit automatiquement l'application. et recharge la ou les pages Web lorsque vous modifiez l'un des fichiers source.

Pour plus d'informations sur l'outil ng, exécutez la commande suivante.

ng help

La page d'accueil d'Angular CLI : https://angular.io/cli

Dans cet article, nous avons montré comment installer la Angular CLI sur différentes distributions Linux. Nous avons également expliqué comment créer, compiler et servir une application angulaire de base sur un serveur de développement. Pour toute question ou réflexion que vous souhaitez partager avec nous, utilisez le formulaire de commentaires ci-dessous.