Skip to content

Instantly share code, notes, and snippets.

@fabecerram
Last active December 6, 2022 21:30
Show Gist options
  • Save fabecerram/d216edbaab4f6f01f697e055ca817cb1 to your computer and use it in GitHub Desktop.
Save fabecerram/d216edbaab4f6f01f697e055ca817cb1 to your computer and use it in GitHub Desktop.
Angular CLI Cheat Sheet – Una guía básica para Angular CLI

Angular CLI Cheat Sheet – Una guía básica para Angular CLI

La información de esta guía es de carácter educativo, está orientada principalmente a estudiantes y desarrolladores web que se inician en Angular, esta compilación ha sido seleccionada pensando en los aspectos necesarios para los cursos de nivel básico e intermedio, por lo que no abarca en profundidad ninguno de los aspectos mencionados, sólo cubre las características más comunes en ellos.

Si desea obtener más detalles, consulte la documentación oficial de Angular CLI en https://angular.io/cli


Preparando el ambiente de trabajo para Angular

Verificando la versión de Angular que tenemos instalada

ng version      
ng v    

Instalar Angular CLI

npm install -g @angular/cli

npm install -g @angular/cli@latest

npm install -g @angular/cli@version

Desinstalar Angular CLI

npm uninstall -g @angular/cli

Limpiando cache de NPM (Recomendado cuando reinstalamos Angular CLI)

npm cache clean --force

Usando la ayuda Online de Angular CLI

ng help

ng <commando> --help

Comandos básicos Angular CLI

Sintaxis del lenguaje de comandos

ng [commando] [argumento] [opciones]

- La mayoría de los comandos y algunas opciones tienen alias.
- Los argumentos no tienen prefijo.
- Los nombres de las opciones tienen como prefijo un guión doble (--). 
- Los alias de opción tienen el prefijo de un solo guión (-).

Ejemplo:

    ng build my-app -c production
    ng build my-app --configuration production
    ng b my-app -c production
    ng b my-app --configuration production

Crear un nuevo proyecto

ng new projectName
ng n projectName

Ejecutar una aplicación en desarrollo

Construye la aplicación y arranca el servidor de desarrollo, observa los archivos y reconstruye la aplicación cada vez que detecta cambios.

ng serve
ng s
ng serve projectName

# Abre el navegador y muestra la aplicación corriendo.
ng serve -o
ng serve --open

# Especifica el puerto a utilizar.
ng serve --port portNumber

Compilar una aplicación

Compila una aplicación o biblioteca Angular en un directorio de salida llamado dist/

ng build
ng b  
ng build projectName    

Ejecutar las herramientas de análisis estático de código (Linting Tools)

ng lint   
ng lint projectName

Ejecutar las pruebas unitarias (Unit Tests)

ng test
ng t   
ng test projectName


El comando "generate"

El comando generate en Angular CLI es uno de los bloques de construcción básicos de las aplicaciones Angular, hace uso de plantillas llamadas esquemas, que facilitan la creación de diferentes elementos de forma rápida y segura.

Sintaxis

ng generate <schematic>      
ng g <schematic>

# Obliga a sobreescribir un archivo.
ng generate <schematic> --force

Crear una clase

ng generate class [name]
ng generate cl [name]
ng g class [name]
ng g cl [name]

# Omite la creación del archivo "spec.ts" usado para las pruebas unitarias.
ng generate class [name] --skip-tests

Crear un componente

ng generate component [name]
ng generate c [name]
ng g component [name]
ng g c [name]

# Omite la creación del archivo "spec.ts" usado para las pruebas unitarias.
ng generate component [name] --skip-tests

Crear directiva

ng generate directive [name]
ng generate d [name]
ng g directive [name]
ng g d [name]

# Omite la creación del archivo "spec.ts" usado para las pruebas unitarias.
ng generate directive [name] --skip-tests

Crear enumeración

ng generate enum [name]
ng generate e [name]
ng g enum [name]
ng g e [name]

Crear un Guard

ng generate guard [name]
ng generate g [name]
ng g guard [name]
ng g g [name]

# Omite la creación del archivo "spec.ts" usado para las pruebas unitarias.
ng generate guard [name] --skip-tests

Crear un Interceptor

ng generate interceptor [name]
ng g interceptor [name]

# Omite la creación del archivo "spec.ts" usado para las pruebas unitarias.
ng generate interceptor [name] --skip-tests

Crear una Interface

ng generate interface [name]
ng generate i [name]
ng g interface [name]
ng g i [name]

Crear Módulos

ng generate module [name]
ng generate m [name]
ng g module [name]
ng g m [name]

Crear Pipes

ng generate pipe [name]
ng generate p [name]
ng g pipe [name]
ng g p [name]

# Omite la creación del archivo "spec.ts" usado para las pruebas unitarias.
ng generate pipe [name] --skip-tests

Crear Services

ng generate service [name]
ng generate s [name]
ng g service [name]
ng g s [name]

# Omite la creación del archivo "spec.ts" usado para las pruebas unitarias.
ng generate service [name] --skip-tests


Creador

Fabian A. Becerra M. https://github.com/fabecerram


Copyright y Licencia

Code and documentation copyright 2019-2022 the authors. Code released under the MIT License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment