Original article: How to Install Angular on Windows: A Guide to Angular CLI, Node.js, and Build Tools

angular-cli-install-1

En este tutorial, aprenderemos cómo instalar la interfaz de línea de comandos de Angular (Angular CLI) en el sistema operativo Windows y usarla para crear un nuevo proyecto Angular.

¿Qué es la interfaz de línea de comandos de Angular (Angular CLI)?

La Angular CLI es la herramienta oficial para inicializar y trabajar con proyectos de Angular. Te libra de las molestas configuraciones y herramientas de compilación de TypeScript, Webpack y demás.

Después de instalar la Angular CLI, necesitará ejecutar un comando para generar un proyecto y otro para correrlo usando un servidor local de desarrollo, con el fin de jugar con tu aplicación.

Como la mayoría de herramientas modernas para el frontend en la actualidad, la Angular CLI está construida sobre Node.js.

Node.js es una tecnología del lado del servidor que le permite a los desarrolladores ejecutar código JavaScript en el servidor y compilar aplicaciones web del lado del servidor. Sin embargo, Angular es una tecnología del frontend, por lo que incluso si necesita instalar Node.js en tu máquina de desarrollo, solo es para correr la interfaz de línea de comandos.

Una vez que compile tu aplicación para producción no necesitará Node.js, ya que el empaquetado final solo son HTML, CSS y JavaScript estáticos que pueden ser servidos por cualquier servidor web o un CDN (Content Delivery Network).

Dicho esto, si está construyendo una aplicación web full-stack con Angular, podría necesitar Node.js para crear la parte del backend en el caso de que desee usar JavaScript para el frontend y el backend.

Revise la MEAN Stack - es una arquitectura que incluye Mongo DB, Express (un servidor web y plataforma para API REST construida sobre Node.js) y Angular. Puede leer artículos en internet si quisiera un tutorial paso a paso para empezar con este stack.

En este caso, Node.js es usado para compilar el backend de tu aplicación y puede ser reemplazado por cualquier tecnología del lado del servidor que desee, como PHP, Ruby o Python. Pero Angular no depende de Node.js excepto por tu interfaz de línea de comandos (CLI) y para la instalación de paquetes con npm.

NPM se describe por Node Package Manager (Gestor de Paquetes para Node). Es un registro que hospeda los paquetes para Node y en los años recientes también ha sido usado para publicar paquetes y librerías para en frontend tales como Angular, React, vue.js e inclusive Bootstrap.

Instalar Angular CLI en Windows

Primero, necesita tener instalado Node.js y npm en tu máquina de desarrollo.

Hay varias maneras de hacerlo tales como:

  • Usar NVM (Node Version Manager) para instalar y trabajar con múltiples versiones de node en tu sistema.
  • Usar el manejador de paquetes oficial de tu sistema operativo.
  • Instalarlo desde la página web oficial.

Para hacerlo sencillo usemos el sitio web oficial. Simplemente, visite la página de descargas y descargue los binarios para Windows, luego siga las instrucciones del asistente de instalación.

Puede asegurarse de que Node se encuentra instalado en tu sistema ejecutando el siguiente comando en la interfaz de línea de comandos o terminal, la cual debería mostrar la versión de Node instalada:

$ node -v

Continuando, ejecute el siguiente comando para instalar la Angular CLI:

$ npm install @angular/cli

Después de que el comando termine de ejecutarse exitosamente, debería tener la Angular CLI instalada.

Una Guía Rápida sobre la Angular CLI

Después de instalar la Angular CLI, puede ejecutar muchos comandos. Empecemos por chequear la versión de la CLI instalada:

$ ng version

Un segundo comando que podría necesitar ejecutar es el comando help para obtener una guía de ayuda completa:

$ ng help

La CLI provee los siguientes comandos:

add: Agrega soporte para una librería externa en tu proyecto.

build (b): Compila una aplicación de Angular en un directorio de salida llamado  dist/ en la ruta dada. Debe ser ejecutado dentro del un directorio que contenga un espacio de trabajo.

config: Retorna o establece valores de configuración para Angular.

doc (d): Abre la documentación oficial en el navegador (angular.io) y busca por un término dado.

e2e (e): Compila y sirve una aplicación Angular, luego ejecuta pruebas end-to-end usando Protractor.

generate (g): Genera y/o modifica archivos basándose en un esquema.

help: Lista los comandos disponibles y una descripción corta sobre ellos.

lint (l): Corre las herramientas de formato de código en la aplicación de Angular en una carpeta definida.

new (n): Crea un nuevo espacio de trabajo e inicializa una nueva aplicación Angular.

run: Ejecuta un comando personalizado definido en tu proyecto.

serve (s): Compila y sirve la aplicación, recompilando cuando hay cambios en archivos.

test (t): Ejecuta las pruebas unitarias en un proyecto.

update: Actualiza tu aplicación y sus dependencias. Vea https://update.angular.io/ para más referencias.

version (v): Muestra la versión de la interfaz de línea de comandos de Angular.

xi18n: Extrae los mensajes de localización (i18n) del código fuente.

Generar un Proyecto.

Puede usar la Angular CLI para generar rápidamente un nuevo proyecto Angular mediante la ejecución del siguiente comando:

$ ng new frontend

Nota: frontend es el nombre del proyecto. Puede, por supuesto, escoger cualquier nombre válido para tu proyecto. Como crearemos una aplicación full-stack estoy usando frontend como nombre para la aplicación frontend.

Como mencioné antes, la CLI preguntará si desea añadir enrutamiento a la aplicación, para lo cual puede responder y (Yes- Sí) o n (No) que es la opción por defecto. También se le preguntará acerca del formato de hoja de estilos que quiere usar (como CSS). Escoge tu opción preferida y presione Enter para continuar.

Después lo realizado tendrá tu proyecto creado con una estructura de directorios y un conjunto de configuraciones y archivos de código. Estos serán la mayoría en formato TypeScript y JSON. Veamos el papel de cada archivo:

  • /e2e/: contiene los test end-to-end (simulan el comportamiento de un usuario) para el sitio web
  • /node_modules/: todas las librerías de terceros son instaladas en esta carpeta usando el comando npm install
  • /src/: contiene el código fuente de la aplicación. La mayoría del trabajo se realiza aquí
  • /app/: contiene módulos y componentes
  • /assets/: contiene recursos estáticos como imágenes, íconos y estilos
  • /environments/: contiene configuraciones específicas de ambiente (como producción y/o desarrollo)
  • browserslist: necesario para el soporte CSS para el autoprefixer
  • favicon.ico: el archivo para el favicon
  • index.html: el archivo HTML principal
  • karma.conf.js: archivo de configuración de Karma (herramienta de prueba)
  • main.ts: el archivo de inicio principal desde donde se carga el AppModule
  • polyfills.ts: polyfills (fragmento de código que se utiliza para proporcionar una funcionalidad moderna en navegadores antiguos que no lo admiten de forma nativa) requeridos por Angular
  • styles.css: la hoja de estilos global para el proyecto
  • test.ts: es un archivo de configuración para Karma
  • tsconfig.*.json: archivos de configuración para TypeScript
  • angular.json: contiene las configuraciones para la línea de comandos de Angular
  • package.json: contiene la información básica del proyecto (nombre, descripción y dependencias)
  • README.md: un archivo markdown que contiene una descripción del proyecto
  • tsconfig.json: archivo de configuración para TypeScript
  • tslint.json: archivos de configuración para TSlint (una herramienta de análisis estático de código)

Sirviendo el Proyecto

La línea de comandos de Angular provee una cadena de herramientas de desarrollo completa para aplicaciones front-end en tu máquina local. Como tal, no necesita instalar un servidor web local para servir tu proyecto, únicamente ejecutar el comando ng serve desde tu terminal para servir tu proyecto localmente.

Primero, navegue a la carpeta de tu proyecto en la terminal ejecutando los comandos:

$ cd frontend
$ ng serve

Ahora puede navegar a la dirección http://localhost:4200/ para comenzar a jugar con tu aplicación front-end. La página se actualizará en vivo automáticamente cada vez que usted haga cambios en el código.

Generar Artefactos de una App Angular

La línea de comandos angular provee el comando, ng generate el cual ayuda a los desarrolladores a generar artefactos básicos de Angular tales como módulos, componentes, directivas, pipes, y servicios:

$ ng generate component mi-componente

mi-componente es el nombre del componente a crear. La Angular LCI automáticamente añadirá una referencia a components, directives ypipes en el archivo src/app.module.ts.

Si quiere añadir tu componente, directiva or pipe a otro módulo (otro diferente al módulo de aplicación principal, app.module.ts), simplemente puede agregar el prefijo con el nombre del módulo y un slash:

$ ng g component mi-modulo/mi-componente

mi-modulo es el nombre de un módulo existente.

Conclusión

En este tutorial, hemos visto cómo instalar la interfaz de línea de comandos (CLI) de Angular en tu máquina Windows, la cual hemos usado para inicializar un nuevo proyecto Angular desde cero.

También hemos visto varios comandos que puede usar a través del desarrollo de tu proyecto para generar artefactos, tales como módulos, componentes y servicios.