Electron es un framework muy potente que nos permite encapsular nuestras aplicaciones de Angular en wrappers nativos para sistemas operativos de escritorio como Windows, MacOS o Linux. Incluso podremos generar los paquetes de instalación, también nativos, para cada sistema operativo con otra herramienta llamada electron-packager.
Electron debe ser instalado mediante npm:
npminstall electron --save-exact
Una vez instalado el paquete, tendremos que crear un archivo llamado main.js en el directorio raíz de nuestra aplicación y referenciarlo en el archivo package.json de nuestra app con el atributo ""main"". En este archivo debemos importar los objetos app y BrowserWindow, además de crear los valores de configuración y la función createWindow(), necesarios para generar la aplicación.
Definimos los manejadores de los eventos 'ready', 'window-close-all' y 'activate' que enlazarán a la función createWindow() y a las instrucciones necesarias para liberar la memoria de los recursos reservados por la aplicación cuando ésta haya sido cerrada o reactivar si se ha minimizado, respectivamente.
En el sistema operativo MacOS hay una particularidad, y es que al cerrar la ventana de una aplicación, ésta continúa ejecutándose en segundo plano, por lo que es necesario tener en cuenta esta salvedad en nuestro código para que la aplicación tenga un comportamiento esperado en cada uno de los sistemas operativos.
Finalmente generamos el paquete de producción de nuestra aplicación con el comando de Angular CLI: ng build --prod, generando la carpeta dist/ con los archivos y recursos optimizados y comprimidos para el ambiente de producción y por último el comando electron .
Para generar el paquete de instalación debemos ejecutar:
Para los que usan Windows , cambien en vez de darwin por:
if(process.platform!=='win32')
Si les sale la pantalla en blanco y la solución de cambiar el target a es5 no les funciona, lo que me sirvió a mi fue cambiar en el package.json el "electron" por:
"electron": "ng build --base-href ./ && electron .",
Alguien sabe porque se queda en blanco la pantalla de electron, se ejecuta el comando pero sale la siguiente pantalla
No crei que estuviera tan completo el curso, pero me sorprendio todos los usos que le dio Eduardo. Buenisimo los cursos que imparte.
Excelente no conocia electron ahora me esta gustando mucho las tecnologias javascript, por cierto se perdieron los fondos. en la app de escritorio.
Excelente la explicación, un gran aporte
No puedo compilar con --prod me sale el siguiente error:
ERROR in src/app/home/home.component.html(6,40): : Property 'croppedImage' does not exist on type 'HomeComponent'.
Esto es porque no la tienes definida en tu Ts. Chequea si esta bien definida
excelente aporte. Un curso más que hacer en platzi…
Interesante
Es normal que la carpeta que genere electron sea tan pesada? hice un ejercicio muy simple y pesa más de una giga
me esta saliendo este error al correr el comando npm run electron
Date:2019-01-29T16:29:28.223Z
Hash: 89e431da156078dfc4b0
Time: 13008ms
chunk {main} main.js, main.js.map(main)82.3 kB [initial][rendered]chunk {polyfills} polyfills.js, polyfills.js.map(polyfills)227 kB [initial][rendered]chunk {runtime} runtime.js, runtime.js.map(runtime)5.22 kB [entry][rendered]chunk {styles} styles.js, styles.js.map(styles)260 kB [initial][rendered]chunk {vendor} vendor.js, vendor.js.map(vendor)6.86MB[initial][rendered]C:\Users\milciades.vargas\Downloads\messagelive\main.js:25app.on("ready", createWindow);^TypeError:Cannot read property 'on'ofundefined at Object.<anonymous>(C:\Users\milciades.vargas\Downloads\messagelive\main.js:25:5) at Object.<anonymous>(C:\Users\milciades.vargas\Downloads\messagelive\main.js:41:3) at Module._compile(internal/modules/cjs/loader.js:693:30) at Object.Module._extensions..js(internal/modules/cjs/loader.js:704:10) at Module.load(internal/modules/cjs/loader.js:602:32) at tryModuleLoad(internal/modules/cjs/loader.js:541:12) at Function.Module._load(internal/modules/cjs/loader.js:533:3) at Function.Module.runMain(internal/modules/cjs/loader.js:746:12) at startup(internal/bootstrap/node.js:282:19) at bootstrapNodeJSCore(internal/bootstrap/node.js:759:3)npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! messagelive@0.0.0electron:`ng build && electron .`npm ERR!Exit status 1npm ERR!npm ERR!Failed at the messagelive@0.0.0 electron script.npmERR!This is probably not a problem with npm.There is likely additional logging output above.npmERR!A complete log ofthis run can be found in:npm ERR!C:\Users\milciades.vargas\AppData\Roaming\npm-cache\_logs\2019-01-29T16_29_29_102Z-debug.log
Trata de cambiar a otro directorio y probar tuve el mismo problema y se debia al . en el nombre de una de las carpetas en tu caso creo que se debe a milciades.vargas
Que ruta de aprendizaje recomiendan para crear aplicaciones de escritorio o software de escritorio multiplataforma como este, me gustaria aprender desde 0 hasta llegar a este curso. les agradeceria mucho si me dijeran
Hola Juan, puedes comenzar haciendo el curso de Electron para profundizar estos conocimientos, luego puedes pasar a hacer el curso de PWA con Angular, ya teniendo estos conceptos puedes pasar a hacer aplicaciones móviles tomando el curso de Ionic, con estos cursos crearás aplicaciones multiplataforma.
Muy interesante conocer ELECTRON, este poderoso framework nos ayuda a que nuestra aplicacion web desarrollada con Angular pueda ejecutarse de forma "nativa" en aplicaciones Desktop multiplataforma. Al igual que Ionic orientado en moviles
Excelente clase!
Angular 10
Electron en este caso se recomienda instalar como dependencia de desarrollo dentro del proyecto.
ng build --prod para usar la carpeta dist si no les aparece.
Me encanta esta solución para hacer el delivery de la app!! GENIO EDUARDOOOO!!!
Me sale este error al ejecutar npm install electron --save-exact
C:\Users\zankeii\Documents\PLATZI\ANGULAR6\messenger>npm install electron --save-exact
> electron@5.0.1 postinstall C:\Users\zankeii\Documents\PLATZI\ANGULAR6\messenger\node_modules\electron
> node install.jsDownloading tmp-12604-0-electron-v5.0.1-win32-x64.zipError: read ECONNRESETC:\Users\zankeii\Documents\PLATZI\ANGULAR6\messenger\node_modules\electron\install.js:49throw err
^Error: read ECONNRESET at TLSWrap.onStreamRead(internal/stream_base_commons.js:167:27)npm WARN bootstrap@4.3.1 requires a peer of jquery@1.9.1-3 but none is installed.You must install peer dependencies yourself.npmWARN bootstrap@4.3.1 requires a peer of popper.js@^1.14.7 but none is installed.You must install peer dependencies yourself.npmWARN optional SKIPPINGOPTIONALDEPENDENCY: fsevents@1.2.8(node_modules\fsevents):npm WARN notsup SKIPPINGOPTIONALDEPENDENCY:Unsupported platform for fsevents@1.2.8: wanted {"os":"darwin","arch":"any"}(current:{"os":"win32","arch":"x64"})npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! electron@5.0.1postinstall:`node install.js`npm ERR!Exit status 1npm ERR!npm ERR!Failed at the electron@5.0.1 postinstall script.npmERR!This is probably not a problem with npm.There is likely additional logging output above.npmERR!A complete log ofthis run can be found in:npm ERR!C:\Users\zankeii\AppData\Roaming\npm-cache\_logs\2019-05-15T23_55_02_152Z-debug.log
Excelente muy buena explicación sobre la empaquetacion de los archivos.
