Cómo instalar Angular CLI en Ubuntu 22.04

Introducción

Angular CLI es una poderosa herramienta que permite a los desarrolladores crear e implementar rápidamente aplicaciones Angular. Proporciona un conjunto de comandos para crear e implementar rápidamente aplicaciones basadas en ng. También cubriremos algunas de las características de Angular CLI. Las funciones de la CLI angular incluyen:

• Creación de nuevos proyectos con diferentes plantillas.
• Trabajar con archivos y recursos
• Proyectos de construcción para la producción.
• Generación de andamios de código

En esta publicación de blog, le mostraremos cómo instalar Angular CLI en Ubuntu 22.04.

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

Conexión al servidor

Para acceder al servidor, necesita saber 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 de usuario raíz.

Si no está usando el usuario raíz, puede iniciar sesión con otro nombre de usuario usando el mismo comando, luego cambie la raíz a su nombre de usuario :

ssh nome_utente@IP_DEL_SERVER

A continuación, se le pedirá que introduzca 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

Node.js es el requisito principal para ejecutar aplicaciones Angular. Puede instalar el Node.js necesario mediante la utilidad de línea de comandos de NVM. Inicie sesión en su sistema Ubuntu y siga:

Use el siguiente comando para instalar NVM:

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

Ahora active el entorno NVM en su sistema:

source ~/.bashrc

A partir de hoy, Angular 14 es la última versión compatible con Node.js 14 LTS y 16 LTS. El siguiente comando instalará Node.js 16 en su sistema:

nvm install v16

El siguiente comando mostrará la versión de node y npm instalada en su sistema:

node -v

npm -v

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 @angular/cli --location=global

La última versión de Angular CLI se instalará en su sistema Ubuntu Linux.

Es posible que se requiera una versión anterior de Angular en la máquina. Para instalar una versión específica de Angular , ejecute el comando de la siguiente manera con el número de versión:

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

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

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

El uso del -gcomando anterior instalará la herramienta Angular CLI globalmente. Entonces será accesible para todos los usuarios y aplicaciones del sistema. Angular CLI proporciona un comando ngutilizado para operaciones de línea de comandos. Verifiquemos la versión instalada de ng en su sistema:

ng version 

La interfaz de línea de comando angular se ha instalado en su sistema. Para la aplicación existente, puede comenzar su trabajo e ignorar el resto del artículo.

Siga los siguientes pasos para crear una nueva aplicación Angular en su sistema.

Crear una nueva aplicación angular

Puede usar el comando ngpara crear una nueva aplicación 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

? 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.

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 angular básica está lista para usar. Cambie al directorio hello-world 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 . Se puede acceder al sistema en el puerto 4200 para abrir la aplicación angular, por ejemplo:

• http://localhost:4200

Puede cambiar el host y el puerto para ejecutar la aplicación Angular proporcionando los argumentos de la línea de comando –hosty –port:

ng serve --host 0.0.0.0 --port 3001

El uso de la dirección host 0.0.0.0permite que la aplicación escuche en todas las interfaces y sea de acceso público.

Conclusión

En conclusión, este artículo le mostró cómo instalar Angular CLI en Ubuntu 22.04. Este tutorial también lo ayudó a crear una nueva aplicación angular.