¿Qué es Angular CLI y para que Sirve?

¿Qué es Angular CLI?

Debido a la complejidad del desarrollo con Angular, aunque el ejemplo que deseemos desarrollar se trate de un sencillo «Hola mundo», comenzar usando Angular CLI nos ahorrará escribir mucho código y nos permitirá partir de un esquema de aplicación avanzado y capaz de facilitar los flujos de desarrollo. Además nos ofrecerá una serie de herramientas ya configuradas y listas para hacer tareas como, depuración, testing o deploy. Y dicho sea de paso, el CLI también nos ahorrará caer en errores de principiante que nos provoquen frustración en los momentos iniciales. Así que vamos con ello.

node -v

npm -v

npm install -g @angular/cli

ng --help

ng new mi-nuevo-proyecto-angular

cd mi-nuevo-proyecto-angular

ng serve

http://localhost:4200/

Podrías modificar el puerto perfectamente si lo deseas, simplemente indicando el puerto deseado con la opción –port:

ng serve --port 4201

Una vez hayas abierto en navegador y accedido a la URL de localhost, con el puerto indicado, verás la pantalla de inicio de la aplicación que se acaba de crear. Tendrá un aspecto similar al de la siguiente imagen (ten en cuenta que esta página es solo una especie de «hola mundo» y que su aspecto puede cambiar dependiendo de la versión de Angular que estés usando.

Scripts de npm

Para quien no lo sepa, npm es el «Node Package Manager», el gestor de paquetes de NodeJS. El CLI de Angular lo hemos instalado vía npm. Nuestra propia aplicación Angular se puede gestionar vía npm, para instalar sus dependencias. Iremos conociendo las mecánicas en el Manual de Angular (que mas adelante publicaremos), no obstante, queremos detenermos a hablar de una herramienta de utilidad a la que puedes sacar ya mismo algo de valor: los scripts de npm.

Los scripts de npm son como subcomandos que npm te acepta para automatizar diferentes tareas. Éstos se definen en el archivo «package.json», en la sección «scripts».

Como scripts de npm en nuestro proyecto recien creado encuentras varias alternativas como «start», «build», «test», etc. Esos scripts se pueden poner en marcha desde la consola, mediante el comando «npm», por ejemplo, para lanzar el script «start», tienes que escribir el comando de consola:

ng start

En el archivo package.json encuentras el comando que se ejecutará al hacer cada uno de estos scripts npm. Por ejemplo «start» lo que provoca es que se lance el comando «ng serve». Por lo tanto los comandos «npm start» o «ng serve» en principio son equivalentes. Sin embargo, nosotros podemos modificar los scripts npm para ajustarlos a nuestras necesidades, o incluso crear nuevos comandos npm. Para probar simplemente vamos a poner «–o» al final del comando correspondiende con el script «start». Este «–o» lo que hace es que, al iniciarse el servidor para correr la aplicación Angular, se abra el navegador directamente y nos la muestre.

"scripts": {
    "ng": "ng",
    "start": "ng serve --o",
    [...]
}

Ahora, al hacer un "npm start" observarás cómo se inicia el servidor web, nos indica la URL donde está disponible, pero nos abre el navegador automáticamente mostrando esa URL. Así te ahorras el trabajo de lanzar tú mismo el browser y escribir a mano la dirección del servidor que se ha abierto para servir nuestra app de Angular.

Problema Angular CLI con Broccoli en Windows

El problema más típico que nos podemos encontrar al usar Angular CLI es que no tengamos permisos de administrador. Al intentar poner en marcha el servidor recibirás un error como este:

The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with: operation not permitted.

Es muy sencillo de solucionar en Windows, ya que simplemente necesitamos abrir el terminal en modo administrador(botón derecho sobre el icono del programa que uses para línea de comandos y «abrir como administrador». Eso permitirá que Angular CLI disponga de los permisos necesarios para realizar las tareas que requiere.

ACTUALIZACIÓN: Esto lo han cambiado en una versión beta de Angular CLI (Beta 6), por lo que ya no hace falta privilegios de administrador para usar las herramientas de línea de comandos de Angular 2.

En Linux o Mac, si te ocurre algo similar, simplemente tendrías que lanzar los comandos como «sudo».

Angular CLI tiene mucho más

En esta pequeña introducción solo te hemos explicado cómo iniciar un nuevo proyecto de Angular 2 y cómo servirlo después por medio del comando serve. Pero lo cierto es que detrás de Angular CLI hay muchas otras instrucciones de gran utilidad. Principalmente, como hemos comentado, encontrarás una gran cantidad de comandos que permiten crear el esqueleto de componentes, directivas, servicios, etc.

A medida que vayamos adentrándonos en el desarrollo con Angular 2 iremos aprendiendo de una forma sencilla y práctica todas las posibilidades que permite esta herramienta. De momento te recomendamos documentarte en el mencionado repositorio de Github.