Recherche de site Web

Comment créer et exécuter des applications Angular à l’aide d’Angular CLI et de PM2

Angular CLI est une interface de ligne de commande pour le framework Angular, qui est utilisée pour créer, générer et exécuter votre application localement pendant le développement.

Il est conçu pour construire et tester un projet Angular sur un serveur de développement. Cependant, si vous souhaitez exécuter/maintenir vos applications en vie pour toujours en production, vous avez besoin d’un gestionnaire de processus Node.js tel que PM2.

PM2 est un gestionnaire de processus de production populaire, avancé et riche en fonctionnalités pour les applications Node.js avec un équilibreur de charge intégré.

Son ensemble de fonctionnalités comprend la prise en charge de la surveillance des applications, la gestion efficace des micro-services/processus, l’exécution du mode cluster d’applications et le redémarrage et l’arrêt progressifs des applications. En outre, il prend en charge la gestion facile des journaux d’application, et bien plus encore.

Dans cet article, nous allons vous montrer comment exécuter des applications Angular à l’aide de l’interface de ligne de commande Angular et du gestionnaire de processus Node.js PM2. Cela vous permet d’exécuter votre application en continu pendant le développement.

Exigences

Pour continuer, les packages suivants doivent être installés sur votre serveur :

  • Node.js et MNP
  • CLI angulaire
  • PM2

Remarque : Si vous avez déjà Node.js et NPM installés sur votre système Linux, passez à l’étape 2.

Étape 1 : Installation de Node.js sous Linux

Pour installer la dernière version de Node.js, ajoutez d’abord le référentiel NodeSource sur votre système comme indiqué et installez le package. N’oubliez pas d’exécuter la commande correcte pour la version Node.js que vous souhaitez installer sur votre distribution Linux.

Installer 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

Installer Node.js sur des distributions basées sur RHEL

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

En outre, installez également des outils de développement sur votre système afin de pouvoir compiler et installer des addons natifs de NPM.

$ sudo apt install build-essential  [On Debian/Ubuntu]
yum install gcc-c++ make          [On CentOS/RHEL]
dnf install gcc-c++ make          [On Fedora]

Une fois que vous avez installé Node.js et NPM, vous pouvez vérifier leurs versions à l’aide des commandes suivantes.

$ node -v
npm -v

Étape 2 : Installation d’Angular CLI et PM2

Ensuite, installez Angular CLI et PM2 à l’aide du gestionnaire de packages npm comme indiqué. Dans les commandes suivantes, l’option -g signifie installer les paquets globalement – utilisables par tous les utilisateurs du système.

$ sudo npm install -g @angular/cli        #install Angular CLI
sudo npm install -g pm2                 #install PM2

Étape 3 : Création d’un projet Angular à l’aide de l’interface de ligne de commande Angular

Allez maintenant dans le répertoire webroot de votre serveur, puis créez, générez et diffusez votre application Angular (appelée sysmon-app, remplacez-la par le nom de votre application) à l’aide de l’interface de ligne de commande Angular.

$ cd /srv/www/htdocs/
sudo ng new sysmon-app        #follow the prompts

Ensuite, déplacez-vous dans le répertoire de l’application (le chemin complet est /srv/www/htdocs/sysmon-app) qui vient d’être créé et qui sert l’application comme indiqué.

$ cd sysmon-app
sudo ng serve

À partir de la sortie de la commande ng serve, vous pouvez voir que l’application Angular ne s’exécute pas en arrière-plan, vous ne pouvez plus accéder à l’invite de commande. Par conséquent, vous ne pouvez pas exécuter d’autres commandes pendant qu’il est en cours d’exécution.

Vous avez donc besoin d’un gestionnaire de processus pour contrôler et gérer l’application : exécutez-la en continu (pour toujours) et permettez-lui également de démarrer automatiquement au démarrage du système, comme expliqué dans la section suivante.

Avant de passer à la section suivante, terminez le processus en appuyant sur [Ctl + C] pour libérer l’invite de commande.

Étape 4 : Exécuter Angular Project pour toujours à l’aide de PM2

Pour que votre nouvelle application s’exécute en arrière-plan, libérant ainsi l’invite de commande, utilisez PM2 pour la servir, comme indiqué. PM2 facilite également les tâches courantes d’administration du système telles que le redémarrage en cas de panne, l’arrêt et le rechargement des configurations sans temps d’arrêt, et bien plus encore.

$ pm2 start "ng serve" --name sysmon-app

Ensuite, pour accéder à l’interface Web de votre application, ouvrez un navigateur et naviguez à l’aide de l’adresse http://localhost:4200 comme indiqué dans la capture d’écran suivante.

Dans ce guide, nous avons montré comment exécuter des applications Angular à l’aide de l’interface de ligne de commande Angular et du gestionnaire de processus PM2. Si vous avez d’autres idées à partager ou des questions, contactez-nous via le formulaire de commentaires ci-dessous.

Articles connexes: