Implementar Angular en App de Electron

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 .."
  }