Cómo instalar Angular CLI en Ubuntu 20.04 LTS

1 mar 2021 4 min di lettura
Cómo instalar Angular CLI en Ubuntu 20.04 LTS
Indice dei contenuti

Introducción

Angular es el marco más popular utilizado para crear aplicaciones web y móviles. Angular es un marco de aplicación web de código abierto desarrollado por Google y una gran comunidad de personas. Hasta la fecha, Angular 10 es la última versión disponible para la instalación. Este tutorial le ayudará a instalar el módulo de nodo Angular CLI en su sistema Linux Ubuntu 20.04 LTS Focal Fossa.

Recomendamos utilizar un usuario no root con privilegios sudo.

Si desea instalar Angular CLI en un servidor remoto, continúe leyendo; de lo contrario, omita el primer párrafo "Conectando al servidor" y lea el siguiente.

Conexión al servidor

Para acceder al servidor, necesita conocer la dirección IP. También necesitará su nombre de usuario y contraseña para la autenticación. Para conectarse al servidor como root, escriba el siguiente comando:

ssh root@IP_DEL_SERVER

A continuación, deberá ingresar la contraseña del usuario root.

Si no usa el usuario root, puede iniciar sesión con otro nombre de usuario usando el mismo comando, luego cambie root a su nombre de usuario:

ssh nome_utente@IP_DEL_SERVER

Luego se le pedirá que ingrese su contraseña de usuario.

El puerto estándar para conectarse a través de ssh es 22, si su servidor usa un puerto diferente, deberá especificarlo usando el parámetro -p, luego escriba el siguiente comando:

ssh nome_utente@IP_DEL_SERVER -p PORTA

Instalar Node.js

NVM es una herramienta de línea de comandos para instalar y administrar node.js en un sistema Linux. Entonces, primero debemos instalar nvm en nuestro sistema. Inicie sesión en el sistema como un usuario no root, luego ejecute el siguiente comando para instalar nvm:

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

Más tarde, puede instalar cualquier versión de nodo en su sistema. También es posible instalar múltiples versiones de nodo en un solo sistema. Ejecute los siguientes comandos para cargar el entorno e instalar la última versión de node.js:

source ~/.bashrc
nvm install node

El comando anterior mostrará la versión de node y npm instalados en su sistema.

Instalar CLI angular

Después de instalar node.js y npm en su sistema, use los siguientes comandos para instalar la herramienta Angular cli en su sistema:

npm install -g @angular/cli

La última versión de Angular CLI se instalará en su sistema Ubuntu Linux. Es posible que necesite una versión anterior de Angular en su máquina. Para instalar una versión Angular específica, ejecute el comando de la siguiente manera con el número de versión:

npm install -g @angular/cli@8
npm install -g @angular/cli@9
npm install -g @angular/cli@10

El uso de la -g instalará la herramienta CLI de Angular a nivel mundial. Entonces será accesible para todos los usuarios y aplicaciones del sistema. Angular CLI proporciona la ng utilizada para operaciones de línea de comando.

Comprobemos la versión instalada de ng en su sistema:

ng --version

Debería ver un mensaje de salida similar al siguiente:


 _ _ ____ _ ___
 /\ _ __ __ _ _ _| | __ _ _ __ /___| | |_ _|
 /△ \ | '_ \ /_` | | | | |/_` | '__| | | | | | |
 /___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
 /_/\_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
 |___/Angular CLI: 10.1.3
 Node: 14.12.0
 OS: linux x64

 Angular:...
 Ivy Workspace:

 Package Version
 ------------------------------------------------------
 @angular-devkit/architect 0.1001.3 (cli-only)
 @angular-devkit/core 10.1.3 (cli-only)
 @angular-devkit/schematics 10.1.3 (cli-only)
 @schematics/angular 10.1.3 (cli-only)
 @schematics/update 0.1001.3 (cli-only)

La interfaz de línea de comando angular se ha instalado en el sistema.

Crea una nueva aplicación Angular

Puede usar el ng para crear una nueva aplicación con Angular. Cree una aplicación llamada hello-world usando la herramienta de línea de comando Angular.

Ejecute el siguiente comando en la terminal:

ng new hello-world

Debería ver un mensaje de salida similar al siguiente:

? Would you like to add Angular routing? Yes
 ? Which stylesheet format would you like to use? CSS
 CREATE hello-world/README.md (1028 bytes)
 CREATE hello-world/.editorconfig (274 bytes)
 CREATE hello-world/.gitignore (631 bytes)
 CREATE hello-world/angular.json (3606 bytes)
 CREATE hello-world/package.json (1254 bytes)
 CREATE hello-world/tsconfig.json (458 bytes)
 CREATE hello-world/tslint.json (3185 bytes)
 CREATE hello-world/.browserslistrc (853 bytes)
 CREATE hello-world/karma.conf.js (1023 bytes)
 CREATE hello-world/tsconfig.app.json (287 bytes)
 CREATE hello-world/tsconfig.spec.json (333 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 (2835 bytes)
 CREATE hello-world/src/styles.css (80 bytes)
 CREATE hello-world/src/test.ts (753 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 (662 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 (25757 bytes)
 CREATE hello-world/src/app/app.component.spec.ts (1072 bytes)
 CREATE hello-world/src/app/app.component.ts (215 bytes)
 CREATE hello-world/e2e/protractor.conf.js (869 bytes)
 CREATE hello-world/e2e/tsconfig.json (294 bytes)
 CREATE hello-world/e2e/src/app.e2e-spec.ts (644 bytes)
 CREATE hello-world/e2e/src/app.po.ts (301 bytes)
 ✔ Packages installed successfully.

Esto creará un directorio llamado hello-world en el directorio actual y creará todos los archivos necesarios para una aplicación Angular.

Sirviendo la aplicación Angular

Su aplicación básica de Angular está lista para funcionar. Cambie al hello-world con el comando cd y luego ejecute su aplicación Angular usando el comando ng serve:

cd hello-world
ng serve

De forma predeterminada, la aplicación Angular se ejecuta en el puerto 4200. Puede acceder al sistema en el puerto 4200 para abrir la aplicación Angular, conectarse a su dirección IP oa localhost: http://localhost:4200

Puede cambiar el host y el puerto para ejecutar la aplicación Angular usando los siguientes indicadores de línea de comando –host y –port:

ng serve --host 0.0.0.0 --port 8080

La dirección IP 0.0.0.0 escucha en todas las interfaces y es de acceso público.

Conclusión

En este tutorial, aprendió cómo instalar la utilidad de línea de comando Angular como un nodo. Este tutorial también lo ayudó a crear una nueva aplicación Angular.

Buy me a coffeeBuy me a coffee

Supportaci se ti piacciono i nostri contenuti. Grazie.

Successivamente, completa il checkout per l'accesso completo a Noviello.it.
Bentornato! Accesso eseguito correttamente.
Ti sei abbonato con successo a Noviello.it.
Successo! Il tuo account è completamente attivato, ora hai accesso a tutti i contenuti.
Operazione riuscita. Le tue informazioni di fatturazione sono state aggiornate.
La tua fatturazione non è stata aggiornata.