Angular ist ein Open-Source-Webanwendungs-Framework zum Erstellen von mobilen und Desktop-Webanwendungen. Es ist in TypeScript/JavaScript geschrieben und wurde 2009 von Google erstellt. Es wurde speziell für den Aufbau kleiner bis großer Anwendungen von Grund auf neu entwickelt. Es wird mit einem Angular-CLI-Dienstprogramm geliefert, mit dem Sie Angular-Anwendungen erstellen, verwalten, erstellen und testen können.
In diesem Tutorial zeigen wir Ihnen, wie Sie Angular unter Ubuntu 20.04 installieren.
Voraussetzungen
- Ein Server mit Ubuntu 20.04.
- Auf dem Server ist ein Root-Passwort konfiguriert.
Installieren Sie Node.js
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. Sie müssen also das Node.js-Repository zu Ihrem System hinzufügen.
Fügen Sie zuerst das Node.js-Repository mit dem folgenden Befehl hinzu:
curl -sL https://deb.nodesource.com/setup_14.x | bash -
Installieren Sie nach dem Hinzufügen 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 als Nächstes die npm-Version auf die neueste Version, indem Sie den folgenden Befehl ausführen:
npm install [email protected] -g
Überprüfen Sie als Nächstes 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 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
Angular-Projekt erstellen
An diesem Punkt ist Angular in Ihrem System installiert. Es ist an der Zeit, ein neues Projekt mit Angular zu erstellen.
Wechseln Sie zunächst in das Verzeichnis /opt und erstellen Sie mit dem folgenden Befehl ein neues Projekt namens myproject:
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 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.
Zugang zur Angular-Weboberfläche
An diesem Punkt wird das Angular-Projekt bereitgestellt und überwacht Port 8088. Sie können über die URL http://your-server-ip:8088 darauf zugreifen. Sie sollten den folgenden Bildschirm sehen:
Schlussfolgerung
Herzliche Glückwünsche! Sie haben Angular erfolgreich auf Ubuntu 20.04 installiert. Jetzt können Sie mit der Bereitstellung Ihres ersten Projekts mit Angular beginnen. Eine der großartigen Funktionen von Angular ist das erneute Laden von Webpacks im laufenden Betrieb, das die Änderung live bereitstellt und Ihnen viel Zeit spart.