Ricerca nel sito web

Come installare Angular su Ubuntu 20.04 LTS

Su questa pagina

  1. Prerequisiti
  2. Installa Node.js
  3. Installa Angular
  4. Crea progetto angolare
  5. Accedi all'interfaccia web di Angular
  6. Conclusione

Angular è un framework di applicazioni Web open source per la creazione di applicazioni Web mobili e desktop. È scritto in TypeScript/JavaScript ed è stato creato nel 2009 da Google. È appositamente progettato per creare da zero applicazioni su piccola e larga scala. Viene fornito con un'utilità Angular CLI che ti aiuta a creare, gestire, costruire e testare applicazioni Angular.

In questo tutorial, ti mostreremo come installare Angular su Ubuntu 20.04.

Prerequisiti

  • Un server che esegue Ubuntu 20.04.
  • Sul server è configurata una password di root.

Installa Node.js

Prima di iniziare, dovrai installare Node.js e npm nel tuo sistema. Per impostazione predefinita, l'ultima versione di Node.js non è disponibile nel repository predefinito di Ubuntu 20.04. Quindi dovrai aggiungere il repository Node.js al tuo sistema.

Innanzitutto, aggiungi il repository Node.js con il seguente comando:

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

Una volta aggiunto, installa Node.js con il seguente comando:

apt-get install nodejs -y

Una volta installato, verifica la versione installata di Node.js con il seguente comando:

node --version

Dovresti vedere il seguente output:

v14.7.0

Successivamente, aggiorna la versione npm alla versione più recente eseguendo il seguente comando:

npm install  -g

Successivamente, verifica la versione npm con il seguente comando:

npm --version

Dovresti ottenere il seguente output:

6.14.7

Installa Angolare

Puoi installare Angular usando npm come mostrato di seguito:

npm install -g @angular/cli

Una volta installato, verifica la versione installata di Angular utilizzando il seguente comando:

ng version

Dovresti vedere il seguente output:

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

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

Crea progetto angolare

A questo punto, Angular è installato nel tuo sistema. È tempo di creare un nuovo progetto con Angular.

Innanzitutto, modifica la directory in /opt e crea un nuovo progetto denominato myproject con il seguente comando:

cd /opt
ng new myproject

Quindi, cambia la directory in myproject e servi il progetto con il seguente comando:

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

Dovresti vedere il seguente output:

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.

Accedi all'interfaccia Web angolare

A questo punto, il progetto Angular è distribuito e in ascolto sulla porta 8088. È possibile accedervi utilizzando l'URL http://your-server-ip:8088. Dovresti vedere la seguente schermata:

Conclusione

Congratulazioni! hai installato correttamente Angular su Ubuntu 20.04. Ora puoi iniziare a distribuire il tuo primo progetto con Angular. Una delle grandi funzionalità di Angular è il ricaricamento a caldo del webpack che distribuisce la modifica in tempo reale e fa risparmiare molto tempo.