Come installare Angular CLI su Ubuntu 22.04

Introduzione

Angular CLI è un potente strumento che consente agli sviluppatori di creare e distribuire rapidamente applicazioni Angular. Fornisce una serie di comandi per creare e distribuire rapidamente applicazioni ng-based. Tratteremo anche alcune delle funzionalità di Angular CLI. Le caratteristiche di Angular CLI includono:

Creazione di nuovi progetti con diversi modelli
Lavorare con file e risorse
Progetti di costruzione per la produzione
Generazione dello scaffolding del codice

In questo post del blog, ti mostreremo come installare Angular CLI su Ubuntu 22.04.

Se desideri installare Angular su un server in remoto continua a leggere, altrimenti salta il primo paragrafo "Connessione al Server" e leggi il successivo.

Connessione al Server

Per accedere al server, è necessario conoscere l'indirizzo IP. Avrai anche bisogno dell'username e della password per l'autenticazione. Per connettersi al server come utente root digitare il seguente comando:

ssh root@IP_DEL_SERVER

Successivamente sarà necessario inserire la password dell'utente root.

Se non utilizzate l'utente root potete connettervi con un'altro nome utente utilizzando lo stesso comando, quindi modificare root con il vostro nome_utente:

ssh nome_utente@IP_DEL_SERVER

Successivamente vi verrà chiesto di inserire la password del vostro utente.

La porta standard per connettersi tramite ssh è la 22, se il vostro server utilizza una porta diversa, sarà necessario specificarla utilizzando il parametro -p, quindi digitare il seguente comando:

ssh nome_utente@IP_DEL_SERVER -p PORTA

Installare Node.js

Node.js è il requisito principale per l'esecuzione di applicazioni Angular. È possibile installare il Node.js richiesto utilizzando l'utilità della riga di comando NVM. Accedi al tuo sistema Ubuntu e segui:

Utilizzare il comando seguente per installare NVM:

curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash

Ora attiva l'ambiente NVM sul tuo sistema:

source ~/.bashrc

Ad oggi, Angular 14 è l'ultima versione che supporta Node.js 14 LTS e 16 LTS. Il comando seguente installerà Node.js 16 sul tuo sistema:

nvm install v16

Il comando seguente visualizzerà la versione di node e npm installati sul tuo sistema:

node -v

npm -v

Installare Angular CLI

Dopo aver installato node.js e npm sul tuo sistema, usa i seguenti comandi per installare lo strumento Angular CLI sul tuo sistema:

npm install @angular/cli --location=global

L'ultima versione di Angular CLI verrà installata sul tuo sistema Ubuntu Linux.

Potrebbe essere necessaria una versione precedente di Angular sulla macchina. Per installare una versione specifica di Angular, eseguire il comando come segue con il numero di versione:

npm install -g @angular/cli@10        #Angular 10

npm install -g @angular/cli@11        #Angular 11

npm install -g @angular/cli@12       #Angular 12

L'utilizzo del comando -g precedente installerà lo strumento Angular CLI a livello globale. Quindi sarà accessibile a tutti gli utenti e le applicazioni sul sistema. Angular CLI fornisce un comando ng utilizzato per le operazioni della riga di comando. Controlliamo la versione installata di ng sul tuo sistema:

ng version

L'interfaccia della riga di comando angular è stata installata sul tuo sistema. Per l'applicazione esistente, puoi iniziare il tuo lavoro e ignorare il resto dell'articolo.

Segui i passaggi successivi per creare una nuova applicazione Angular sul tuo sistema.

Creare una nuova applicazione angular

Puoi usare il comando ng per creare una nuova applicazione angular . Crea un'applicazione denominata hello-world utilizzando lo strumento da riga di comando angular. Esegui il comando seguente nel terminale:

ng new hello-world

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE hello-world/README.md (1064 bytes)
CREATE hello-world/.editorconfig (274 bytes)
CREATE hello-world/.gitignore (548 bytes)
CREATE hello-world/angular.json (2947 bytes)
CREATE hello-world/package.json (1042 bytes)
CREATE hello-world/tsconfig.json (863 bytes)
CREATE hello-world/.browserslistrc (600 bytes)
CREATE hello-world/karma.conf.js (1428 bytes)
CREATE hello-world/tsconfig.app.json (287 bytes)
CREATE hello-world/tsconfig.spec.json (333 bytes)
CREATE hello-world/.vscode/extensions.json (130 bytes)
CREATE hello-world/.vscode/launch.json (474 bytes)
CREATE hello-world/.vscode/tasks.json (938 bytes)
CREATE hello-world/src/favicon.ico (948 bytes)
CREATE hello-world/src/index.html (296 bytes)
CREATE hello-world/src/main.ts (372 bytes)
CREATE hello-world/src/polyfills.ts (2338 bytes)
CREATE hello-world/src/styles.css (80 bytes)
CREATE hello-world/src/test.ts (749 bytes)
CREATE hello-world/src/assets/.gitkeep (0 bytes)
CREATE hello-world/src/environments/environment.prod.ts (51 bytes)
CREATE hello-world/src/environments/environment.ts (658 bytes)
CREATE hello-world/src/app/app-routing.module.ts (245 bytes)
CREATE hello-world/src/app/app.module.ts (393 bytes)
CREATE hello-world/src/app/app.component.css (0 bytes)
CREATE hello-world/src/app/app.component.html (23364 bytes)
CREATE hello-world/src/app/app.component.spec.ts (1088 bytes)
CREATE hello-world/src/app/app.component.ts (215 bytes)
✔ Packages installed successfully.

Questo creerà una directory denominata hello-world nella directory corrente e creerà tutti i file richiesti per un'applicazione angular.

Servire l'applicazione Angular

La tua applicazione angular di base è pronta per essere utilizzata. Passa alla directory hello-world e quindi esegui la tua applicazione angular usando il comando ng serve:

cd hello-world

ng serve

Per impostazione predefinita, l'applicazione angular viene eseguita sulla porta 4200. È possibile accedere al sistema sulla porta 4200 per aprire l'applicazione angular, ad esempio:

http://localhost:4200

È possibile modificare l'host e la porta per l'esecuzione dell'applicazione Angular fornendo gli argomenti della riga di comando –host e –port:

ng serve --host 0.0.0.0 --port 3001

L'utilizzo dell'indirizzo host 0.0.0.0 consente all'applicazione di essere in ascolto su tutte le interfacce ed è accessibile pubblicamente.

Conclusione

In conclusione, questo articolo ti ha mostrato come installare Angular CLI su Ubuntu 22.04. Questo tutorial ti ha anche aiutato a creare una nuova applicazione angular.