HowtoForge

Wie installiert man Angular auf Ubuntu 20.04 LTS

von ·

Angular ist ein Open-Source-Webanwendungs-Framework zur Erstellung mobiler und Desktop-Webanwendungen. Es ist in TypeScript/JavaScript geschrieben und wurde 2009 von Google erstellt. Es ist speziell dafür konzipiert, kleine bis große Anwendungen von Grund auf neu zu erstellen. Es wird mit einem Angular-CLI-Dienstprogramm geliefert, das Sie beim Erstellen, Verwalten, Erstellen und Testen von Angular-Anwendungen unterstützt.

In diesem Tutorial zeigen wir Ihnen, wie Sie Angular unter Ubuntu 20.04 installieren.

Voraussetzungen

  • Ein Server mit CentOS 8.
  • Auf dem Server wird ein Root-Passwort konfiguriert.

Node.js installieren

Bevor Sie beginnen, müssen Sie Node.js und npm in Ihrem System installieren. Standardmäßig ist die neueste Version von Node.js nicht im Standard-Repository von Ubuntu 20.04 verfügbar. Daher müssen Sie das Repository Node.js zu Ihrem System hinzufügen.

Fügen Sie zunächst das Repository Node.js mit dem folgenden curl Befehl hinzu:

curl -sL https://deb.nodesource.com/setup_14.x | bash -

Nach dem Hinzufügen installieren Sie das Node.js mit dem folgenden Befehl:

apt-get install nodejs -y

Überprüfen Sie nach der Installation die installierte Version von Node.js mit dem folgenden Befehl:

node --version

Sie sollten die folgende Ausgabe sehen:

v14.7.0

Aktualisieren Sie anschließend die npm-Version auf die neueste Version, indem Sie den folgenden Befehl ausführen:

npm install npm@latest -g

Überprüfen Sie anschließend die npm-Version mit dem folgenden Befehl:

npm --version

Sie sollten die folgende Ausgabe erhalten:

6.14.7

Angular installieren

Sie können Angular mit dem npm wie unten gezeigt installieren:

npm install -g @angular/cli

Überprüfen Sie nach der Installation die installierte Version von Angular mit dem folgenden Befehl:

ng version

Sie sollten die folgende Ausgabe sehen:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / ? \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 10.0.5
Node: 14.7.0
OS: linux x64

Angular: 
... 
Ivy Workspace: 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1000.5
@angular-devkit/core         10.0.5
@angular-devkit/schematics   10.0.5
@schematics/angular          10.0.5
@schematics/update           0.1000.5
rxjs                         6.5.5

Winkelprojekt erstellen

Zu diesem Zeitpunkt ist Angular in Ihrem System installiert. Es ist an der Zeit, ein neues Projekt mit Angular zu erstellen.

Ändern Sie zunächst das Verzeichnis in /opt und erstellen Sie ein neues Projekt mit dem Namen myproject mit dem folgenden Befehl:

cd /opt
ng new myproject

Wechseln Sie als Nächstes in das Verzeichnis myproject und bedienen Sie das Projekt mit dem folgenden Befehl:

cd myproject
ng serve --host your-server-ip --port 8088

Sie sollten folgende Ausgabe sehen: Sie sollten die folgende Ausgabe sehen:

WARNING: This is a simple server for use in testing or debugging Angular applications
locally. It hasn't been reviewed for security issues.

Binding this server to an open connection can result in compromising your application or
computer. Using a different host than the one passed to the "--host" flag might result in
websocket connection issues. You might need to use "--disableHostCheck" if that's the
case.
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/core : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015

chunk {main} main.js, main.js.map (main) 60.6 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.65 MB [initial] [rendered]
Date: 2020-08-09T14:10:36.644Z - Hash: a053188b5496361814a2 - Time: 14873ms
** Angular Live Development Server is listening on 69.87.218.220:8088, open your browser on http://69.87.218.220:8088/ **
: Compiled successfully.

Zugriff auf die Webschnittstelle im Winkel

Zu diesem Zeitpunkt wird das Angular-Projekt auf Port 8088 bereitgestellt und überwacht. Sie können über die URL http://your-server-ip:8088 darauf zugreifen. Sie sollten den folgenden Bildschirm sehen:

Winkel JS-Projekt

Schlussfolgerung

Herzlichen Glückwunsch! Sie haben Angular unter Ubuntu 20.04 erfolgreich installiert. Jetzt können Sie mit der Bereitstellung Ihres ersten Projekts mit Angular beginnen. Eines der großartigen Merkmale von Angular ist das Webpack-Hot-Reloading, das die Änderung live einsetzt und Ihnen viel Zeit spart.

Das könnte dich auch interessieren …