2 Extensiones imprescindibles para Angular

Language Service

La primera extensión es Language Service que permite evaluar los templates en el momento del desarrollo desde su IDE, esto quiere decir que proporciona el auto-completado, del que estamos acostumbrados desde TypeScript, en plantillas internas y externas. También va mucho más profundo que eso, ya que puede obtener un manejo de errores estricto de diagnósticos específicos de Angular, corrigiendo algunos errores que podamos cometer en nuestra sintaxis.

Lo más impresionante del Language Service es que no está acoplado a una versión Angular específica y puede utilizarse en cualquier editor de texto e IDE tan pronto como haya un complemento disponible.

Podemos instalar la extensión ejecutando el siguiente comando en nuestra consola, recordando que de antemano debemos tener instalado NPM:

npm i @angular/language-service --save-dev

Luego debemos activarlo en nuestro IDE, en este caso utilizaremos WebStorm

Activar Language Service en el IDE

• Archivo -> Preferencias
• Languages & Frameworks -> TypeScript
• Use TypeScript Service -> Configure
• Use Angular Service -> Ok -> Apply

Augury

La segunda extensión es Augury es una extensión de Chrome que se conectará a nuestras Chrome DevTools. Una vez cargado, nos ayudará a explorar las relaciones entre los componentes individuales en nuestra aplicación que son visibles en la página. Por otra parte Augury nos ayuda a depurar nuestras aplicaciones Angular 2 al permitirnos ver los árboles de componentes, las propiedades de árbol de enrutadores, las clases de componentes y Algoritmo de detección de cambios.

Para instalar podemos acceder al siguiente link de Augury luego hacer click en Añadir a Chrome -> Añadir Extensión y Listo podemos comenzar a utilizar esta fantástica extensión en la consola de nuestro navegador Google Chrome.