Comandos mas usados de Angular CLI [#2]
La linea de comandos de Angular es una herramienta del equipo de Angular que ayuda con la generacion de codigo y y sigue las practicas que ellos recomiendan. En este articulo te muestro algunos de los comandos que uso en el dia a dia. Si no estas usando el CLI de Angular actualmente probablemente estes realizando algunas tareas manualmente que pueden ser automatizadas rapidamente. Por ejemplo al crear un componente con el CLI obtenemos por defecto los siguientes archivos: :
- componentname.ts: La clase principal en un archivo de typescript
- componentname.html: La plantilla HTML para el componente
- componentname.css: La hoja de estilos para el componente
- componentname.spec.ts: El archivo de pruebas unitarias para el componente.
Con el CLI puedes autogenerar codigo para componentes, servicios, pipes. Ademas puedes correr pruebas unitarias, servir aplicaciones y formatear el codigo. Puedes encontrar la lista completa de comandos del CLI de Angular en la siguiente pagina: https://cli.angular.io/
Ten en cuenta que la mayor parte de estos comandos tiene opciones, muchas de estas opciones
cuentan con un alias. Por ejemplo, para compilar una aplicacion e iniciar un servidor puedes ejecutar
ng serve --open or ng serve -o
Recuerda que en caso de dudas acerca de algun comando puedes pedir ayuda al CLI usando ng help.
Instalacion del framework y verificacion de versiones
Instalar el CLI de Angular
Instala el CLI de Angular, el parametro -g indica que sera instalado globalmente.
npm install -g @angular/cli
Desinstalar el CLI de Angular
En caso de que tengas una version distinta a la que requieres puedes desinstalar la version actual y volver a instar el CLI.
npm uninstall -g @angular/cli
Verificar la version actual de Angular
Verificar que version de Angular, CLI, Node y algunos otros componentes de Angular tenemos instalados en nuestro ambiente local.
ng version
ng v
Crear una aplicacion de Angular
Crear un workspace vacio
Si estas pensando crear multiples aplicaciones o librerias en una misma solucion puedes crear un workspace donde puedes alojar el codigo de multiples proyectos o librerias.
ng new my-workspace --create-application=false
Generar componentes, pipes, servicios de Angular
Crear una libreria de Angular
Crea una libreria de Angular
ng generate library [name] --prefix [prefix]
Crear un componente
Genera un componente nuevo inclyendo la plantilla de HTML, la hoja de estilos, la clase en typescript y un archivo de pruebas unitarias.
ng generate c [componentname]
La opcion flat indica que no se creara una carpeta para el componente.
ng generate c [componentname] -flat
Corre el comando si hacer los cambios realmente, esto te permitira verificar que archivos y donde se crearan para validarlos antes de hacer el cambio real.
ng generate c [componentname] --dry-run
Crear un servicio
Genera un servicio en un archivo de typescript y un archivo de pruebas para el servicio.
ng generate service [ServiceName]
Crear un pipe
Genera un pipe en un archivo de typescript y un archivo de pruebas para la clase.
ng generate pipe [PipeName]
Ciclo de desarrollo
Servir la aplicacion
Incia un servidor e inicia la web
ng serve --open
ng serve -o
Inicia el servidor y sirve la aplicacion. Este comando corre lo que se encuentre configurado en el archivo package.json. Por defecto un proyecto de Angular es generado con "ng serve" para el comando npm start.
npm start
Linting
Este comando usara TSLint para hacer una verificacion del codigo y buscar errores de estilo o programaticos.
ng lint
Correr pruebas
ng test
Correr pruebas y generar un reporte de cobertura de pruebas. Comando completo
ng test --code-coverage
Correr pruebas y generar un reporte de cobertura de pruebas.
ng test -cc