Búsqueda de sitios web

Angular CLI: cómo crear un nuevo proyecto angular en Linux

Angular es un marco de desarrollo de aplicaciones front-end de código abierto, popular y altamente extensible, que se utiliza para crear aplicaciones móviles y web utilizando TypeScript/JavaScript . y otros lenguajes comunes.

Angular es un término general para todas las versiones de Angular que vienen después de AngularJS (o Angular versión 1.0), incluido Angular 2. y Angular 4.

Angular es ideal para crear aplicaciones de pequeña y gran escala desde cero. Uno de los componentes clave de la plataforma Angular para ayudar al desarrollo de aplicaciones es la utilidad Angular CLI: es una herramienta de línea de comandos simple y fácil de usar que se utiliza para crear , administrar, construir y probar aplicaciones Angular.

En este artículo, explicaremos cómo instalar la herramienta de línea de comandos Angular en un sistema Linux y aprenderemos algunos ejemplos básicos de esta herramienta.

Instalación de Node.js en Linux

Para instalar Angular CLI, debe tener instalada la última versión de Node.js y NPM en su sistema Linux.

Instalar Node.js en Ubuntu

------------- For Node.js v19.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_19.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v18.x -------------
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v16.x -------------
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v14.x -------------
curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

Instalar Node.js en Debian

------------- For Node.js v19.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_19.x | bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v18.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_18.x | bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v16.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_16.x | bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v14.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_14.x | bash - &&\
sudo apt-get install -y nodejs

Instale Node.js en RHEL, CentOS, Fedora, Rocky y Alma Linux

------------- For Node.js v19.x ------------- 
curl -fsSL https://rpm.nodesource.com/setup_19.x | sudo bash -
sudo yum install -y nodejs

------------- For Node.js v18.x ------------- 
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install -y nodejs

------------- For Node.js v16.x ------------- 
curl -fsSL https://rpm.nodesource.com/setup_16.x | sudo bash -
sudo yum install -y nodejs

------------- For Node.js v14.x ------------- 
curl -fsSL https://rpm.nodesource.com/setup_14.x | sudo bash -
sudo yum install -y nodejs

Además, para compilar e instalar complementos nativos de NPM, es posible que necesites instalar herramientas de desarrollo en tu sistema de la siguiente manera.

sudo apt install -y build-essential  [On Debian/Ubuntu]
sudo yum install gcc-c++ make        [On RHEL Systems]

Instalación de Angular CLI en Linux

Una vez que tenga Node.js y NPM instalados, como se muestra arriba, puede instalar Angular CLI usando el administrador de paquetes npm. de la siguiente manera (el indicador -g significa instalar la herramienta en todo el sistema para que la utilicen todos los usuarios del sistema).

npm install -g @angular/cli
OR
sudo npm install -g @angular/cli

Puede iniciar Angular CLI utilizando el ejecutable ng que ahora debería estar instalado en su sistema. Ejecute el siguiente comando para verificar la versión de Angular CLI instalada.

ng version
OR
ng --version

Crear un proyecto angular usando Angular CLI

En esta sección, mostraremos cómo crear, construir y servir un proyecto Angular nuevo y básico. Primero, vaya al directorio webroot de su servidor, luego inicialice una nueva aplicación Angular de la siguiente manera (recuerde seguir las instrucciones):

cd /var/www/html/
ng new tecmint-app			#as root
OR
sudo ng new tecmint-app		#non-root user

A continuación, vaya al directorio de la aplicación que acaba de crear y entregue la aplicación como se muestra.

cd tecmint-app
ls 			#list project files
ng serve

Antes de poder acceder a su nueva aplicación desde un navegador web, si tiene un servicio de firewall en ejecución, debe abrir el puerto 4200 en la configuración del firewall como se muestra.

---------- On Firewalld ---------- 
firewall-cmd --permanent --zone=public --add-port=4200/tcp 
firewall-cmd --reload

---------- On UFW ----------
sudo ufw allow 4200/tcp
sudo ufw reload

Ahora puede abrir un navegador web y navegar usando la siguiente dirección para ver cómo se ejecuta la nueva aplicación, como se muestra en la siguiente captura de pantalla.

http://localhost:4200/ 
or 
http://SERVER_IP:4200

Nota: si usa el comando ng servir para crear una aplicación y servirla localmente, como se muestra arriba, el servidor reconstruye automáticamente la aplicación. y recarga las páginas web cuando cambia cualquiera de los archivos fuente.

Para obtener más información sobre la herramienta ng, ejecute el siguiente comando.

ng help

La página de inicio de Angular CLI: https://angular.io/cli

En este artículo, hemos mostrado cómo instalar Angular CLI en diferentes distribuciones de Linux. También cubrimos cómo construir, compilar y servir una aplicación Angular básica en un servidor de desarrollo. Para cualquier consulta o idea que desee compartir con nosotros, utilice el formulario de comentarios a continuación.