Configurar un nuevo proyecto de Angular 2 es un proceso complicado y tedioso pero la herramienta Angular CLI lo volverá bien sencillo.

Configurar un nuevo proyecto de Angular 2 es un proceso complicado y tedioso, con tareas como:

• Crear la estructura básica de archivos y bootstrap
• Configurar SystemJS o WebPack para transpilar el código
• Crear scripts para ejecutar el servidor de desarrollo

Puedes partir de proyectos starters para hacer más llevadero el problema, pero… ¿No sería más cómodo tener una herramienta que pueda hacer todo esto por ti?

Eso mismo es lo que cree el equipo de Angular, que ha publicado una herramienta que te ayuda a crear un nuevo proyecto en Angular 2 sin ningún esfuerzo: Se llama Angular CLI.

Angular CLI

Angular CLI es una Command Line Interface que te permite generar proyectos y plantillas de código desde terminal, así como ejecutar un servidor de desarrollo o lanzar los tests de tu aplicación. Tan simple como escribir el comando adecuado.

Instalación

Angular CLI se instala a través de npm. Escribe en terminal:

$ npm install -g angular-cli

Esto instala Angular CLI, al que se puede acceder desde terminal con la palabra clave ng.

Comandos

A continuación, los comandos más populares para agilizar tu desarrollo de proyectos Angular 2.

Nuevo proyecto

Para crear un nuevo proyecto Angular 2 de nombre myApp, solo tienes que hacer:

$ ng new myApp

Esto creará la carpeta myApp con un esqueleto de proyecto ya montado según la última versión de Angular 2 y todo el trabajo sucio de configuración de WebPack para transpilar el código y meterlo en un bundle, configuración de tests, lint y typescript, etc.

Además, instala todas las dependencias necesarias de npm e incluso inicializa el proyecto como un repositorio de GIT.

Inicializar un proyecto

Imagina que ya has empezado a trabajar en tu carpeta anotherApp. Solo tienes que entrar en ella y ejecutar:

$ ng init anotherApp

Así se ejecutará un proceso similar al de ng new, pero montando todo el proyecto en tu directorio actual.

Servidor de desarrollo

Quieres ejecutar tu código y ver los resultados en el navegador. Incluso quieres trabajar sobre este y ver los cambios en tiempo real. Angular CLI acude en tu ayuda. Desde el directorio del proyecto, ejecuta:

ng serve

Esto lanza tu app en la URL http://localhost:4200 y actualiza el contenido cada vez que guardas algún cambio.

Generar código

Hay elementos de código que mantienen una cierta estructura y no necesitas escribirla cada vez que creas un archivo nuevo. Existen code snippets que te ayudan con esto, claro, pero aún así tienes que ir a la carpeta adecuada, crear el archivo… ¡olvídate! tienes ng generate.

Este comando te permite generar varios elementos habituales en Angular 2:

• Componentes: ng generate component myComponent

• Servicios: ng generate service myService

• Pipes: ng generate pipe myPipe

• Rutas: ng generate route myRoute

• Directivas: ng generate directive myDirective

Comprobar la sintaxis

Puedes ejecutar el linter con el comando:

ng lint

Ejecutar tests unitarios

Puedes lanzar los tests unitarios con karma con el comando:

ng test

Ejecutar tests end to end

Puedes lanzar los tests end to end con protractor con el comando:

ng e2e

Más información

Esto es una breve pincelada de lo que te ofrece Angular CLI. Si quieres saber más sobre las opciones que ofrecen estos comandos o conocer el resto de comandos disponibles, dale un vistazo a su reference guide. Es bastante breve y te servirá para sacarte todo el jugo a esta nueva herramienta.

¡Saludos!