Comandos Angular CLI

En el desarrollo de aplicaciones con Angular, el uso de comandos a través de la línea de comandos es una práctica común y esencial. Estos comandos son proporcionados por Angular CLI (Interfaz de Línea de Comandos de Angular), una herramienta que automatiza varias tareas relacionadas con el ciclo de vida de una aplicación Angular.

flowchart TD
    CLI["Angular CLI v19"] --> NEW["ng new: crea proyecto"]
    CLI --> GEN["ng generate: scaffolding"]
    CLI --> SERVE["ng serve: servidor dev"]
    CLI --> BUILD["ng build: compilación"]
    GEN --> COMP["component standalone"]
    GEN --> SERV["service inyectable"]
    GEN --> GUARD["guard funcional"]
    BUILD --> ESBUILD["esbuild + Vite (gestión de bundles)"]

Instalación de Angular CLI

Para empezar a utilizar los comandos de Angular, es necesario instalar Angular CLI. 

Este proceso se lleva a cabo a través del siguiente comando:

npm install -g @angular/cli

Una vez instalado, el comando ng estará disponible globalmente en el terminal.

Con el comando ng help es posible ver todas las posibilidades que ofrece este framework:

Comandos básicos

Creación de un nuevo proyecto Angular

El comando ng new permite crear un nuevo proyecto Angular. 

Al ejecutar este comando, se generará una estructura de carpetas y archivos iniciales para el proyecto.

ng new nombre-proyecto

Iniciar el servidor de desarrollo

Para visualizar el proyecto en un navegador web, es posible utilizar el comando ng serve. Este comando inicia un servidor de desarrollo y abre el proyecto en el navegador por defecto.

ng serve

Generación de componentes

Con el comando ng generate component se crean componentes y automáticamente se generan los archivos necesarios para el componente.

ng generate component mi-componente

O de forma abreviada:

ng g c mi-componente

Este comando creará una nueva carpeta llamada mi-componente dentro del directorio src/app/. Dentro de esta carpeta se encontrarán los archivos necesarios para el nuevo componente, como el archivo TypeScript (mi-componente.component.ts), el archivo HTML (mi-componente.component.html), y el archivo de estilos (mi-componente.component.css). En Angular 21, los componentes generados son standalone por defecto, sin necesidad de declararlos en un NgModule.

Generación de servicios

El comando ng generate service permite crear servicios en Angular.

Los servicios son utilizados para manejar la lógica de negocio, la comunicación con servidores y otras funcionalidades compartidas en la aplicación.

ng generate service nombre-del-servicio

Generación de módulos (enfoque legacy)

El comando ng generate module permite crear módulos (NgModule) en Angular. En Angular 21, los componentes standalone son el estándar por defecto y no requieren módulos. Sin embargo, este comando sigue disponible para mantener compatibilidad con proyectos legacy que utilicen la arquitectura basada en NgModule.

ng generate module nombre-del-modulo

Generación de pipes

El comando ng generate pipe permite crear pipes en Angular.

Los pipes son utilizados para transformar la visualización de datos en las plantillas HTML.

ng generate pipe nombre-del-pipe

Para ver el resto de comandos de generación en angular se puede ejecutar ng generate --help:

Comandos avanzados

Compilación para producción

El comando ng build --configuration production permite compilar la aplicación para producción. Esto optimiza y empaqueta los archivos para su despliegue en un entorno de producción.

Ejecución de pruebas unitarias

El comando ng test permite ejecutar pruebas unitarias en Angular. Esto ejecuta las pruebas definidas en el proyecto y proporciona información sobre su estado.

Ejecución de pruebas end-to-end

El comando ng e2e permite ejecutar pruebas end-to-end en Angular. Esto ejecuta pruebas que simulan la interacción de un usuario con la aplicación.

Agregar dependencias externas

Para agregar una nueva dependencia al proyecto, se utiliza el comando ng add. Esto instala y configura automáticamente la dependencia en el proyecto. Es la forma recomendada de añadir librerías que ofrecen schematics de integración con Angular:

ng add @angular/material

Actualizar Angular CLI

Para actualizar Angular CLI a la última versión, se utiliza el comando:

ng update @angular/cli

Ver versión de Angular CLI

El comando ng version muestra información sobre la versión de Angular CLI y otras dependencias relacionadas.

Personalización de comandos

Angular CLI ofrece diversas opciones para personalizar el comportamiento de los comandos, mediante el uso de flags (indicadores).

Por ejemplo, para especificar el estilo de hojas de estilo al crear un nuevo proyecto:

ng new mi-proyecto --style=scss

Este comando generará un nuevo proyecto utilizando SCSS en lugar de CSS para los estilos.