Cómo instalar Angular en Windows: una guía para Angular CLI, Node.js y herramientas de compilación

Programación

En este tutorial, aprenderemos cómo instalar Angular CLI en Windows y cómo usarlo para crear un proyecto Angular.

¿Qué es Angular CLI?

Angular CLI es la herramienta oficial para inicializar y trabajar con proyectos Angular. Le ahorra la molestia de configuraciones complejas y herramientas de compilación como TypeScript, Webpack, etc.

Después de instalar Angular CLI, deberá ejecutar un comando para generar un proyecto y otro para servirlo usando un servidor de desarrollo local para jugar con su aplicación.

Como la mayoría de las herramientas frontend modernas en estos días, Angular CLI se basa en Node.js.

Node.js es una tecnología de servidor que le permite ejecutar JavaScript en el servidor y crear aplicaciones web del lado del servidor. Sin embargo, Angular es una tecnología de front-end, por lo que incluso si necesita instalar Node.js en su máquina de desarrollo, es solo para ejecutar la CLI.

Una vez que desarrolle su aplicación para producción, no necesitará Node.js porque los paquetes finales son solo HTML estático, CSS y JavaScript que pueden ser servidos por cualquier servidor o CDN.

Dicho esto, si está creando una aplicación web de pila completa con Angular, es posible que necesite Node.js para crear la parte de back-end si desea usar JavaScript para el front-end y el back-end.

Echa un vistazo a la pila MEAN: es una arquitectura que incluye MongoDB, Express (un servidor web y un marco de API REST construido sobre Node.js) y Angular. Puede leer este artículo si desea un tutorial paso a paso para comenzar.

En este caso, Node.js se usa para construir la parte de back-end de su aplicación y se puede reemplazar con cualquier tecnología del lado del servidor que desee, como PHP, Ruby o Python. Pero Angular no depende de Node.js excepto por su herramienta CLI y para instalar paquetes desde npm.

NPM son las siglas de Node Package Manager. Es un registro para alojar paquetes de Node. En los últimos años, también se ha utilizado para publicar bibliotecas y paquetes de interfaz como Angular, React, Vue.js e incluso Bootstrap.

Nota : puede descargar nuestro libro de Angular 8: Cree sus primeras aplicaciones web con Angular 8 de forma gratuita.

Instalación de Angular CLI en Windows

Primero, necesita tener Node y npm instalados en su máquina de desarrollo. Hay muchas formas de hacerlo, como:

  • usando NVM (Node Version Manager) para instalar y trabajar con múltiples versiones de nodo en su sistema
  • usando el administrador de paquetes oficial de su sistema operativo
  • instalándolo desde el sitio web oficial.

Mantengamos las cosas simples y usemos el sitio web oficial. Simplemente visite la página de descarga y obtenga los binarios para Windows, luego siga el asistente de configuración.

Puede asegurarse de que Node esté instalado en su sistema ejecutando el siguiente comando en un símbolo del sistema que debería mostrar la versión instalada de Node:

$ node -v

A continuación, ejecute el siguiente comando para instalar Angular CLI:

$ npm install @angular/cli

Una vez que el comando finaliza correctamente, debe tener instalado Angular CLI.

Una guía rápida para Angular CLI

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

$ ng version

Un segundo comando que quizás deba ejecutar es el helpcomando para obtener una ayuda de uso completa:

$ ng help

La CLI proporciona los siguientes comandos:

add: Agrega soporte para una biblioteca externa a su proyecto.

build (b): Compila una aplicación Angular en un directorio de salida con el nombre   dist/  de la ruta de salida dada. Debe ejecutarse desde un directorio de espacio de trabajo.

config: Recupera o establece valores de configuración angular.

doc (d): Abre la documentación oficial de Angular (angular.io) en un navegador y busca una palabra clave determinada.

e2e (e): Compila y sirve una aplicación angular, luego ejecuta pruebas de un extremo a otro usando Transportador.

generate (g): Genera y / o modifica archivos basados ​​en un esquema.

help: Enumera los comandos disponibles y sus descripciones breves.

lint (l): Ejecuta herramientas de linting en el código de la aplicación Angular en una carpeta de proyecto determinada.

new (n): Crea un nuevo espacio de trabajo y una aplicación angular inicial.

run: Ejecuta un objetivo personalizado definido en su proyecto.

serve (s): Crea y sirve su aplicación, reconstruyéndola según los cambios de archivo.

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

update: Actualiza su aplicación y sus dependencias. Ver //update.angular.io/

version (v): Salida de la versión CLI angular.

xi18n: Extrae los mensajes i18n del código fuente.

Generando un proyecto

Puede usar Angular CLI para generar rápidamente su proyecto Angular ejecutando el siguiente comando en su interfaz de línea de comandos:

$ ng new frontend

Nota: frontend es el nombre del proyecto. Por supuesto, puede elegir cualquier nombre válido para su proyecto. Como crearemos una aplicación de pila completa, estoy usando  frontend como nombre para la aplicación de front-end.

Como se mencionó anteriormente, la CLI le preguntará: ¿Le gustaría agregar enrutamiento angular? , y puede responder ingresando y(Sí) o n(No), que es la opción predeterminada. También le preguntará sobre el formato de hoja de estilo que desea utilizar (como CSS). Elija sus opciones y presione   Enter  para continuar.

Estructura del proyecto Angular 8

Después de eso, tendrá su proyecto creado con una estructura de directorio y un montón de configuraciones y archivos de código. Estará principalmente en formatos TypeScript y JSON. Veamos el rol de cada archivo:

  • /e2e/: contiene pruebas de un extremo a otro (simulando el comportamiento del usuario) del sitio web
  • /node_modules/: Todas las bibliotecas de terceros se instalan en esta carpeta utilizando  npm install
  • /src/: contiene el código fuente de la aplicación. La mayor parte del trabajo se hará aquí
  • /app/: contiene módulos y componentes
  • /assets/: contiene activos estáticos como imágenes, iconos y estilos
  • /environments/: contiene archivos de configuración específicos del entorno (producción y desarrollo)
  • browserslist: necesario por autoprefixer para compatibilidad con CSS
  • favicon.ico: el favicon
  • index.html: el archivo HTML principal
  • karma.conf.js: el archivo de configuración de Karma (una herramienta de prueba)
  • main.ts: El archivo principal de partida desde donde el AppModule se bootstrap
  • polyfills.ts: polyfills necesarios por Angular
  • styles.css: el archivo de hoja de estilo global para el proyecto
  • test.ts: este es un archivo de configuración para Karma
  • tsconfig.*.json: los archivos de configuración para TypeScript
  • angular.json: contiene las configuraciones para CLI
  • package.json: contiene la información básica del proyecto (nombre, descripción y dependencias)
  • README.md: un archivo de rebajas que contiene una descripción del proyecto
  • tsconfig.json: el archivo de configuración para TypeScript
  • tslint.json: el archivo de configuración de TSlint (una herramienta de análisis estático)

Al servicio de su proyecto

Angular CLI proporciona una cadena de herramientas completa para desarrollar aplicaciones de front-end en su máquina local. Como tal, no necesita instalar un servidor local para servir su proyecto; simplemente, puede usar el   ng servecomando desde su terminal para servir su proyecto localmente.

Primero navegue dentro de la carpeta de su proyecto y ejecute los siguientes comandos:

$ cd frontend $ ng serve

Ahora puede navegar a la dirección // localhost: 4200 / para comenzar a jugar con su aplicación de interfaz. La página se volverá a cargar automáticamente si cambia cualquier archivo de origen.

Generando artefactos angulares

Angular CLI proporciona un ng generatecomando que ayuda a los desarrolladores a generar artefactos angulares básicos, como módulos, componentes, directivas, tuberías y servicios:

$ ng generate component my-component

my-componentes el nombre del componente. La CLI angular añadirá automáticamente una referencia components, directivesy pipesen el src/app.module.tsarchivo.

Si desea agregar su componente, directiva o canalización a otro módulo (que no sea el módulo de la aplicación principal app.module.ts), simplemente puede prefijar el nombre del componente con el nombre del módulo y una barra inclinada:

$ ng g component my-module/my-component

my-module es el nombre de un módulo existente.

Conclusión

En este tutorial, hemos visto cómo instalar Angular CLI en nuestra máquina Windows y lo usamos para inicializar un nuevo proyecto Angular desde cero.

También hemos visto varios comandos que puede usar durante el desarrollo de su proyecto para generar artefactos angulares como módulos, componentes y servicios.

Consulte nuestros otros tutoriales de Angular.

Puede comunicarse con el autor o seguirlo a través de su sitio web personal, Twitter, LinkedIn y Github.