Angular te installeren op Ubuntu 20.04 LTS

Angular is een open-source webapplicatie raamwerk voor het bouwen van mobiele en desktop webapplicaties. Het is geschreven in TypeScript/JavaScript en werd in 2009 door Google gemaakt. Het is speciaal ontworpen voor het bouwen van kleine tot grootschalige toepassingen vanaf nul. Het wordt geleverd met een Angular CLI hulpprogramma dat je helpt om Angular toepassingen te maken, beheren, bouwen en testen.

In deze zelfstudie laten we je zien hoe je Angular kunt installeren op Ubuntu 20.04.

Vereisten

  • Een server waarop Ubuntu 20.04 draait.
  • Een root wachtwoord is op de server ingesteld.

Installeer Node.js

Voor je begint, moet je Node.js en npm in je systeem installeren. Standaard is de nieuwste versie van Node.js niet beschikbaar in de Ubuntu 20.04 standaard repository. Je zult dus de Node.js repository aan je systeem moeten toevoegen.

Voeg eerst de Node.js repository toe met het volgende commando:

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

Eenmaal toegevoegd, installeer je de Node.js met het volgende commando:

apt-get install nodejs -y

Eenmaal geïnstalleerd, controleer de geïnstalleerde versie van Node.js met het volgende commando:

node --version

Je zou de volgende uitvoer moeten zien:

v14.7.0

Werk vervolgens de npm versie bij naar de nieuwste versie door het volgende commando uit te voeren:

npm install [email protected] -g

Verifieer vervolgens de npm versie met het volgende commando:

npm --version

Je zou de volgende uitvoer moeten krijgen:

6.14.7

Installeer Angular

Je kunt Angular installeren met de npm zoals hieronder te zien is:

npm install -g @angular/cli

Eenmaal geïnstalleerd, controleer je de geïnstalleerde versie van Angular met het volgende commando:

ng version

Je zou de volgende uitvoer moeten zien:

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

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

Op dit punt is Angular in je systeem geïnstalleerd. Het is tijd om een nieuw project met Angular te maken.

Verander eerst de directory in /opt en maak een nieuw project met de naam myproject met het volgende commando:

cd /opt
ng new myproject

Verander vervolgens de directory in het myproject en dien het project op met het volgende commando:

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

Je zou de volgende uitvoer moeten zien:

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.

Angular webinterface openen

Op dit punt is het Angular project ontplooid en luistert het op poort 8088. Je kunt het benaderen met de URL http://your-server-ip:8088. Je zou het volgende scherm moeten zien:

Angular JS project

Conclusie

Gefeliciteerd! je hebt Angular met succes geïnstalleerd op Ubuntu 20.04. Nu kun je beginnen met het inzetten van je eerste project met Angular. Een van de geweldige functies van Angular is webpack hot reloading dat de verandering live uitrolt en je veel tijd bespaart.