Website-Suche

So erstellen und führen Sie Angular-Apps mit Angular CLI und PM2 aus

Angular CLI ist eine Befehlszeilenschnittstelle für das Angular-Framework, mit der Sie Ihre Anwendung während der Entwicklung lokal erstellen, erstellen und ausführen können.

Es dient zum Erstellen und Testen eines Angular-Projekts auf einem Entwicklungsserver. Wenn Sie Ihre Anwendungen jedoch für immer in der Produktion ausführen/am Leben erhalten möchten, benötigen Sie einen Node.js-Prozessmanager wie PM2.

PM2 ist ein beliebter, fortschrittlicher und funktionsreicher Produktionsprozessmanager für Node.js-Anwendungen mit integriertem Lastenausgleich.

Zu den Funktionen gehören die Unterstützung der Anwendungsüberwachung, die effiziente Verwaltung von Mikrodiensten/Prozessen, die Ausführung des Anwendungsclustermodus sowie das ordnungsgemäße Neustarten und Herunterfahren von Anwendungen. Außerdem unterstützt es die einfache Verwaltung von Anwendungsprotokollen und vieles mehr.

In diesem Artikel zeigen wir Ihnen, wie Sie Angular-Anwendungen mit Angular CLI und dem PM2 Node.js-Prozessmanager ausführen. Dadurch können Sie Ihre Anwendung während der Entwicklung kontinuierlich ausführen.

Anforderungen

Um fortzufahren, müssen die folgenden Pakete auf Ihrem Server installiert sein:

  • Node.js und NPM
  • Angular CLI
  • PM2

Hinweis: Wenn Sie bereits Node.js und NPM auf Ihrem Linux-System installiert haben, fahren Sie mit Schritt 2.

Schritt 1: Node.js unter Linux installieren

Um die neueste Version von Node.js zu installieren, fügen Sie zunächst wie gezeigt das NodeSource-Repository auf Ihrem System hinzu und installieren Sie das Paket. Vergessen Sie nicht, den richtigen Befehl für die Node.js-Version auszuführen, die Sie auf Ihrer Linux-Distribution installieren möchten.

Installieren Sie Node.js unter 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

Installieren Sie Node.js unter 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

Installieren Sie Node.js auf RHEL-basierten Distributionen

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

Installieren Sie außerdem Entwicklungstools auf Ihrem System, damit Sie native Add-ons von NPM kompilieren und installieren können.

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

Sobald Sie Node.js und NPM installiert haben, können Sie deren Versionen mit den folgenden Befehlen überprüfen.

node -v
npm -v

Schritt 2: Installation von Angular CLI und PM2

Als nächstes installieren Sie Angular CLI und PM2 mit dem npm-Paketmanager wie gezeigt. In den folgenden Befehlen bedeutet die Option -g, dass die Pakete global installiert werden – nutzbar für alle Systembenutzer.

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

Schritt 3: Erstellen eines Angular-Projekts mit Angular CLI

Gehen Sie nun in das webroot-Verzeichnis Ihres Servers und erstellen, erstellen und stellen Sie Ihre Angular-App (genannt sysmon-app, ersetzen Sie dies durch den Namen Ihrer App) mit Angular CLI.

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

Wechseln Sie als Nächstes in das Anwendungsverzeichnis (vollständiger Pfad lautet /srv/www/htdocs/sysmon-app), das gerade erstellt wurde und die Anwendung wie gezeigt bereitstellt.

cd sysmon-app
sudo ng serve

Anhand der Ausgabe des ng-serve-Befehls können Sie erkennen, dass die Angular-App nicht im Hintergrund ausgeführt wird und Sie nicht mehr auf die Eingabeaufforderung zugreifen können. Daher können Sie während der Ausführung keine anderen Befehle ausführen.

Sie benötigen also einen Prozessmanager, um die Anwendung zu steuern und zu verwalten: Führen Sie sie kontinuierlich (für immer) aus und aktivieren Sie außerdem den automatischen Start beim Systemstart, wie im nächsten Abschnitt erläutert.

Bevor Sie mit dem nächsten Abschnitt fortfahren, beenden Sie den Vorgang, indem Sie [Strg + C] drücken, um die Eingabeaufforderung freizugeben.

Schritt 4: Angular Project für immer mit PM2 ausführen

Um Ihre neue Anwendung im Hintergrund laufen zu lassen und die Eingabeaufforderung freizugeben, verwenden Sie PM2, um sie wie gezeigt bereitzustellen. PM2 unterstützt auch allgemeine Systemverwaltungsaufgaben wie Neustart bei Fehler, Stoppen und Neuladen von Konfigurationen ohne Ausfallzeiten und vieles mehr.

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

Um auf die Weboberfläche Ihrer Anwendung zuzugreifen, öffnen Sie als Nächstes einen Browser und navigieren Sie mit der Adresse http://localhost:4200, wie im folgenden Screenshot gezeigt.

In diesem Leitfaden haben wir gezeigt, wie Angular-Anwendungen mit Angular CLI und dem PM2-Prozessmanager ausgeführt werden. Wenn Sie weitere Ideen zum Teilen oder Fragen haben, erreichen Sie uns über das unten stehende Feedback-Formular.