Cómo instalar Angular CLI en Ubuntu 20.04

Angular es el marco más popular utilizado para crear aplicaciones móviles y web. Angular es un marco de aplicaciones web de código abierto desarrollado por Google y una gran comunidad de individuos. A partir de hoy, Angular 10 es la última versión disponible para la instalación. Este tutorial lo ayudará a instalar el módulo de nodo CLI angular en su Ubuntu 20.04 Sistema Linux.

Paso 1 - Instalación del nodo.js

NVM es una herramienta de línea de comandos para instalar y administrar el nodo.JS en el sistema Linux. Entonces, primero necesitamos instalar NVM en nuestro sistema. Inicie sesión en el sistema con el usuario para el que necesita instalar el nodo.JS, luego ejecute el siguiente comando para instalar NVM:

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

Después de eso, puede instalar cualquier versión de nodo en su sistema. También puede instalar múltiples versiones de nodo en un solo sistema. Ejecutar los comandos a continuación para cargar el entorno e instalar el último nodo.Versión JS:

fuente ~/.bashrc nodo de instalación nvm 

El comando anterior mostrará la versión de Node y NPM instalada en su sistema.

Paso 2 - Instalación de CLI angular

Después de instalar el nodo.JS y NPM En su sistema, use los siguientes comandos para instalar la herramienta Angular CLI en su sistema.

NPM instalación -g @angular/cli 

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

NPM instalación -g @angular/[correo electrónico protegido]8 #Angular 8 NPM instalación -g @angular/[correo electrónico protegido]9 #Angular 9 NPM instalación -g @angular/[correo electrónico protegido]10 #Angular 10 

Uso del comando -g arriba instalará la herramienta CLI angular globalmente. Por lo tanto, será accesible para todos los usuarios y aplicaciones en el sistema. Angular CLI proporciona un comando ng utilizado para operaciones de línea de comandos. Verifiquemos la versión instalada de NG en su sistema.

ng --versión _ _ ____ _ ___ / \ _ __ __ _ _ _ | | __ _ _ __ / ___ | | | _ _ | / △ \ | '_ \ / _' | | | | |/ _ '| '__ | | | | | | | / ___ \ | | | | (_ | | | _ | | (_ | | | | | ___ | | ___ | | / _ / \ _ \ _ | | _ | \ __, | \ __, _ | _ | \ __, _ | _ | \ ____ | _____ | ___ | | ___/ CLI angular: 10.1.1 nodo: 14.10.1 sistema operativo: Linux x64 Angular:… Ivy Workspace: Versión del paquete ------------------------------------- ----------------- @angular-devkit/arquitecto 0.1001.1 @Angular-Devkit/Core 10.1.1 @Angular-Devkit/Schematics 10.1.1 @Schematics/Angular 10.1.1 @Schematics/Update 0.1001.1 rxjs 6.6.2 

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

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

Paso 3 - Creación de una nueva aplicación angular

Puede usar el comando ng para crear una nueva aplicación angular. Crear aplicación llamada Hello-World usando la herramienta de línea de comandos Angular. Ejecutar el siguiente comando en la terminal:

ng nuevo hello-world 

Producción:

? ¿Le gustaría agregar enrutamiento angular?? Sí ? ¿Qué formato de hoja de estilo te gustaría usar?? CSS Crear Hello-World/Readme.MD (1028 bytes) Crear hello-world/.EditorConfig (274 bytes) Crear Hello-World/.Gitignore (631 bytes) Crear Hello-World/Angular.JSON (3606 bytes) Crear hello-world/paquete.JSON (1254 bytes) Crear Hello-World/Tsconfig.JSON (458 bytes) Crea Hello-World/Tslint.JSON (3185 bytes) Crea Hello-World/.Browserslistrc (853 bytes) Crear Hello-World/Karma.confusión.JS (1023 bytes) Crear hello-world/tsconfig.aplicación.JSON (287 bytes) Crear hello-world/tsconfig.Especificaciones.JSON (333 bytes) Crea Hello-World/Src/Favicon.ICO (948 bytes) Crea Hello-World/SRC/Index.HTML (296 bytes) Crear hello-world/src/main.TS (372 bytes) Crear hello-world/src/polyfills.TS (2835 bytes) Crear Hello-World/Src/Styles.CSS (80 bytes) Crear hello-world/src/test.TS (753 bytes) Crear Hello-World/Src/Assets/.Gitkeep (0 bytes) Crear hello-world/src/entornos/entorno.pinchar.TS (51 bytes) Crear hello-world/src/entornos/entorno.TS (662 bytes) Crear hello-world/src/app/app-ruting.módulo.TS (245 bytes) Crear Hello-World/Src/App/App.módulo.TS (393 bytes) Crear Hello-World/Src/App/App.componente.CSS (0 bytes) Crear Hello-World/Src/App/App.componente.HTML (25757 bytes) Crear hello-world/src/app/app.componente.Especificaciones.TS (1072 bytes) Crear Hello-World/Src/App/App.componente.TS (215 bytes) Crear Hello-World/E2E/Protractor.confusión.JS (869 bytes) Crear Hello-World/E2E/Tsconfig.JSON (294 bytes) Crear Hello-World/E2E/SRC/App.E2E-Spec.TS (644 bytes) Crear hello-world/e2e/src/app.correos.TS (301 bytes) ✔ Paquetes instalados correctamente. Git inicializado con éxito. 

Esto creará un directorio llamado Hello-World en su directorio actual y creará todos los archivos para una aplicación angular.

Paso 4 - Servir la aplicación angular

Su aplicación angular básica está lista para servir. Cambie al directorio Hello-World y luego ejecute su aplicación angular usando el comando ng servidor.

CD Hello-World Servir 

Por defecto, la aplicación angular se ejecuta en el puerto 4200. Puede acceder a su sistema en el puerto 4200 para abrir la aplicación angular, como:

• http: // localhost: 4200

Puede cambiar el host y el puerto para ejecutar la aplicación angular proporcionando argumentos de línea de comandos -host y de puerto.

Ng Servir -Host 0.0.0.0 -Port 8080 

La dirección IP 0.0.0.0 escucha todas las interfaces y accesible públicamente.

Conclusión

En este tutorial, ha aprendido a instalar la utilidad de la línea de comandos angular como un paquete de nodo. Este tutorial también te ayudó a crear una nueva aplicación angular. Ahora, visite aquí para configurar la aplicación angular detrás del servidor Apache.