Implementar Angular en App de Electron

Ignacio Buioli
- 23/05/2017

Está claro que a partir del uso de TypeScript y de la potencia de aplicaciones producidas íntegramente con Angular dicha tecnología se encuentre en una especie de vanguardia dentro de la producción de aplicaciones webs. De la mano de Atom (los desarrolladores de GitHub) hace un tiempo que se nos permite la producción de aplicaciones de escritorio empleando la tecnología web, mediante una instancia de Chromium, paquete al que han bautizado como Electron. Aquí se presenta un claro interrogante a la masa de desarrolladores que desean aprovechar al máximo las prestaciones del desarrollo web: ¿Se pueden implementar los recursos de Angular en una App de Electron?

Puede responderse de forma sencilla: Sí, ya que, mediante Angular-CLI, es posible compilar una app de Angular para que funcione de forma local y de ahí pasarla a una app de Electron previamente generada. El problema es que la app no podrá ser modificada directamente, teniendo que recurrir a la misma enroscada y poco productiva forma de poder visualizar Angular en Electron. La siguiente solución solo requiere unos ligeros ajustes y permitirá generar un entorno de desarrollo con posibilidades de ejecutar la app en un server local, en una app de Electron y compilarla en una app de escritorio.

En principio se da por sentado que se tiene instalada una versión estable de node.js y npm, así como también la recomendación de trabajar sobre una distribución de Linux. A partir de aquí es necesario instalar una app de Electron  para comenzar a desarrollar sobre ella. Opciones existen muchas, pero en este caso es casi obligado usar un método que utilice los paquetes de Node.js, ampliamente recomendado el electron-quickstart. Simplemente hace falta clonar el repositorio (git instalado necesario) y hacer npm install.

Para integrar Angular haremos uso del sistema proporcionado por Angular-CLI, cuya instalación se detalla perfectamente en el propio repositorio. Se deberá instalar de forma global, y acto seguido ejecutaremos en el directorio de la app de Electron el siguiente comando: ng new ng2.

Ahora nos queda simplemente modificar el archivo package.json (el del root, es decir, el de Electron, no el de Angular), agregando unos scripts:

"scripts": {
    "install_all": "npm install && cd ng2 && npm install && cd ..",
    "start": "cd ng2 && ng build -prod -bh ./ && cd .. && electron .",
    "electron": "electron .",
    "serve": "cd ng2 && ng serve && cd ..",
    "build": "cd ng2 && ng build -prod -bh ./ && cd .."
  }

A partir de acá ya se puede entrar a la terminal y simplemente ejecutar el comando npm start para tener el conjunto de Angular y Electron funcionando. Este script incluye, además, la posibilidad de hacer npm run serve para ejecutarlo en un localhost y npm run build para hacer un compilado de Angular posterior a utilizar en un paquete compilado de Electron. Como extra, puede compartirse sin los módulos de node e instalarlos mediante npm run install_all (de otra forma habría que instalarlos de manera independiente).