Comandos Angular CLI

Comandos de Angular CLI

Angular CLI ofrece una amplia gama de comandos que facilitan el desarrollo de aplicaciones Angular. Cada comando está diseñado para automatizar tareas específicas y seguir las mejores prácticas del framework.

La sintaxis general de los comandos de Angular CLI sigue el patrón ng <comando> [opciones], donde cada comando tiene su propósito específico y puede aceptar diferentes parámetros y flags para personalizar su comportamiento.

Comandos fundamentales

Los comandos más utilizados en el desarrollo diario con Angular se pueden categorizar según su función:

Comandos de proyecto:

• ng new - Crea un nuevo proyecto Angular desde cero
• ng serve - Inicia el servidor de desarrollo local
• ng build - Compila la aplicación para producción o desarrollo

Comandos de generación:

• ng generate (o ng g) - Genera nuevos elementos como componentes, servicios, pipes, etc.

Comandos de testing y calidad:

• ng test - Ejecuta las pruebas unitarias del proyecto
• ng lint - Analiza el código en busca de problemas de estilo y calidad
• ng e2e - Ejecuta pruebas end-to-end (cuando están configuradas)

Comandos de desarrollo más utilizados

El comando ng serve es fundamental durante el desarrollo, ya que inicia un servidor local que recarga automáticamente la aplicación cuando detecta cambios en el código:

ng serve

Para compilar la aplicación, utilizamos ng build, que genera los archivos optimizados para producción:

ng build

El comando ng generate es especialmente versátil, permitiendo crear diferentes tipos de elementos:

ng generate component mi-componente
ng generate service mi-servicio
ng generate pipe mi-pipe

Comandos de información y ayuda

Para obtener información sobre el proyecto actual y las versiones instaladas:

• ng version - Muestra las versiones de Angular CLI, Node.js y las dependencias del proyecto
• ng help - Muestra la ayuda general o específica de un comando

Para obtener ayuda específica sobre cualquier comando, puedes usar:

ng help build
ng help generate

Aliases y shortcuts

Angular CLI incluye aliases para los comandos más frecuentes, lo que acelera el desarrollo:

• ng g en lugar de ng generate
• ng s en lugar de ng serve
• ng b en lugar de ng build
• ng t en lugar de ng test

Estos aliases son especialmente útiles cuando trabajas intensivamente con la línea de comandos y necesitas optimizar tu flujo de trabajo.

Estructura de opciones

Todos los comandos de Angular CLI aceptan opciones que modifican su comportamiento. Las opciones se especifican con dos guiones (--) seguidos del nombre de la opción:

ng serve --port 4500
ng build --configuration production
ng generate component header --skip-tests

Las opciones más comunes incluyen --help para obtener ayuda específica, --dry-run para simular la ejecución sin realizar cambios, y --verbose para obtener información detallada del proceso.

Opciones para crear proyecto

El comando ng new es el punto de partida para cualquier proyecto Angular y ofrece múltiples opciones de configuración que determinan la estructura inicial y las características de la aplicación. Comprender estas opciones te permitirá crear proyectos adaptados a las necesidades específicas de cada desarrollo.

Creación básica de proyecto

La forma más simple de crear un proyecto Angular es ejecutar el comando básico:

ng new mi-proyecto

Este comando iniciará un proceso interactivo que te preguntará sobre diferentes aspectos de configuración del proyecto. Cada pregunta corresponde a una opción que también puede especificarse directamente como parámetro.

Opciones principales del comando ng new

Las opciones más importantes que puedes configurar al crear un proyecto incluyen:

Opciones de routing y estilos:

• --routing - Genera automáticamente el módulo de enrutado
• --style - Especifica el formato de hojas de estilo a utilizar

Opciones de configuración del proyecto:

• --prefix - Define el prefijo para los selectores de componentes
• --skip-git - Omite la inicialización del repositorio Git
• --skip-install - No instala automáticamente las dependencias npm

Configuración de estilos

Angular soporta diferentes preprocesadores de CSS que puedes especificar durante la creación:

ng new mi-proyecto --style=scss
ng new mi-proyecto --style=sass  
ng new mi-proyecto --style=less
ng new mi-proyecto --style=css

La opción por defecto es CSS estándar, pero muchos desarrolladores prefieren SCSS por su flexibilidad y características adicionales como variables y anidación.

Configuración de routing

Para proyectos que requieren navegación entre diferentes vistas, puedes habilitar el routing desde el inicio:

ng new mi-proyecto --routing=true

Esta opción genera automáticamente:

• El archivo app-routing.module.ts con la configuración básica. En las versiones más recientes de Angular ya no existe, en su lugar se genera un archivo app.routes.ts.
• La estructura preparada para definir rutas

Opciones avanzadas de configuración

Configuración del workspace:

ng new mi-proyecto --create-application=false

Esta opción crea únicamente el workspace sin generar la aplicación inicial, útil cuando planeas crear múltiples aplicaciones dentro del mismo espacio de trabajo.

Configuración de prefijos personalizados:

ng new mi-proyecto --prefix=mp

El prefijo se utiliza en los selectores de todos los componentes generados. En lugar del prefijo por defecto app-, tus componentes tendrán selectores como mp-header, mp-footer.

Omitir instalación de dependencias

Durante el desarrollo o en entornos con restricciones de red, puedes crear el proyecto sin instalar las dependencias:

ng new mi-proyecto --skip-install

Posteriormente podrás ejecutar npm install cuando sea conveniente para instalar todas las dependencias del proyecto.

Combinación de múltiples opciones

Las opciones pueden combinarse para crear proyectos completamente configurados en un solo comando:

ng new mi-proyecto --routing=true --style=scss --prefix=mp --skip-git

Este comando crea un proyecto con routing habilitado, utilizando SCSS como preprocesador, con prefijo personalizado y sin inicializar Git.

Evitar preguntas interactivas

Para automatizar la creación de proyectos o usar en scripts, puedes especificar todas las opciones como parámetros:

ng new mi-proyecto --routing --style=scss --package-manager=npm --skip-tests=false

Esto evita que Angular CLI haga preguntas interactivas y utiliza directamente los valores proporcionados, siendo especialmente útil en entornos de CI/CD o cuando necesitas crear múltiples proyectos con configuraciones similares.

Opciones de testing

Por defecto, Angular CLI configura el entorno de testing con Jasmine y Karma. Puedes omitir la configuración inicial de tests:

ng new mi-proyecto --skip-tests

Esta opción es útil si planeas configurar un framework de testing diferente o si estás creando un prototipo rápido donde las pruebas no son prioritarias inicialmente.

Ejemplo de creación de proyecto:

Dependiendo de la versión de angular, las preguntas serán diferentes, para el caso de Angular 20 las preguntas son estas: