Angular CLI est une interface en ligne de commande pour le framework Angular, utilisée pour créer, construire et exécuter votre application localement pendant le développement.
Elle est conçue pour construire et tester un projet Angular sur un serveur de développement. Cependant, si vous souhaitez exécuter/maintenir vos applications en production indéfiniment, 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é.
Ses fonctionnalités incluent le support de la surveillance des applications, la gestion efficace des microservices/processus, l’exécution des applications en mode cluster et le redémarrage et l’arrêt gracieux des applications. De plus, il prend en charge la gestion facile des journaux d’application, et bien plus encore.
Dans cet article, nous vous montrerons comment exécuter les applications Angular en utilisant Angular CLI et le gestionnaire de processus Node.js PM2. Cela vous permet de faire tourner votre application en continu pendant le développement.
Exigences
Vous devez avoir les packages suivants installés sur votre serveur pour continuer :
Note: 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, d’abord, ajoutez le dépôt NodeSource sur votre système comme indiqué et installez le paquet. N’oubliez pas d’exécuter la commande correcte pour la version de 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 les 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
De plus, installez également les outils de développement sur votre système afin de pouvoir compiler et installer des modules complémentaires natifs depuis 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 Node.js et NPM installés, vous pouvez vérifier leurs versions en utilisant les commandes suivantes.
$ node -v $ npm -v
Étape 2 : Installation de Angular CLI et PM2
Installez maintenant Angular CLI et PM2 en utilisant le gestionnaire de paquets npm, comme illustré ci-dessous. Dans les commandes suivantes, l’option -g signifie installer les paquets globalement, ce qui les rend 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 en utilisant Angular CLI
Déplacez-vous maintenant dans le répertoire webroot de votre serveur, puis créez, construisez et servez votre application Angular (appelée sysmon-app, remplacez ceci par le nom de votre application) en utilisant Angular CLI.
$ 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éée et servez l’application comme illustré ci-dessous.
$ cd sysmon-app $ sudo ng serve
À partir de la sortie de la commande ng serve, vous pouvez voir que l’application Angular ne fonctionne 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 son exécution.
Vous avez donc besoin d’un gestionnaire de processus pour contrôler et gérer l’application : l’exécuter en continu (pour toujours) et également le 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écution continue du projet Angular en utilisant PM2
Pour exécuter votre nouvelle application en arrière-plan, libérant l’invite de commande, utilisez PM2 pour la servir, comme illustré ci-dessous. PM2 facilite également les tâches courantes d’administration système telles que le redémarrage en cas d’échec, l’arrêt et le rechargement des configurations sans interruption, et bien plus encore.
$ pm2 start "ng serve" --name sysmon-app
Pour accéder à l’interface web de votre application, ouvrez un navigateur et naviguez à 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 en utilisant Angular CLI et le gestionnaire de processus PM2. Si vous avez d’autres idées à partager ou des questions, contactez-nous via le formulaire de feedback ci-dessous.
Source:
https://www.tecmint.com/create-and-run-angular-apps-using-angular-cli-and-pm2/