Turn Your Angular App into a Desktop App with Electron!

[@stevenstonie8252]

its just how a tutorial should be, mentioning meaningful details in each step. such an underrated video.

[@IsraelQuiroz]

You are very welcome! ☺️❤️ Thank u!

[@rahul_kalsha]

Angular project is not working on electron window reload? Any solution?

[@ethicoder7240]

Hello Bro.. I build my angular desktop app but in developer mode i refresh app not work ,app thrown path error how to fix it

[@criticalphysiology2452]

Thanks so much! I ran into an error on MacOS, but I suspect it will happen on most OS's -- you have to install electron-packager globally with 'npm install -g electron-packager' for the electron-packager command to run

[@IsraelQuiroz]

thank you got your input :) and your welcome!!!

[@anessrahmani1265]

Easy and very helpful, hats up

[@IsraelQuiroz]

Ya welcome ☺️

[@darshanheble1844]

Great video but hot reload doesn't work. Pls make a video on it.

[@maharajabanquethall8117]

which node version?

[@ESEVAAPP]

Thank Bro ! I followed by your step and finally I created exe file. Thanks again

[@IsraelQuiroz]

Ya welcome! :)

[@mihailomarcetic2516]

Great video🎉. I think the interesting topic that you could maybe cover is angular pwa applications for android and ios, with maybe using ionic or something else

[@IsraelQuiroz]

Thank you for the idea, now that i started this mini series i might see where i can take these apps to show them, i def want to do an installer and maybe do what was mentioned in the other comments, but this pwa idea is also good and i had thought about it, so ima write it down! thank u for the idea!

[@jairizy]

Hi, thanks for the tutorial. Do you know how to use node libraries like “fs” in your Angular Electron project?

[@IsraelQuiroz]

your welcome, happy u liked it! :) i do! if you want to see an example of how to use a JS library i use the Google JS library in my Google Login Button video on my channel also if u have js code in your typescript file use " // @ts-ignore" to ignore the next lines so they execute and dont throw errors

[@IsraelQuiroz]

Will you guys be using Electron to create any desktop apps? If so let me know in the comments section!

[@carlosGarcia-ql4uz]

I will!! You should think a next video talking about saving data locally now that we know how to do a desktop app with electron!! I'll be waiting for it! thanks man.

[@IsraelQuiroz]

Ooooo okay thank u for the idea! I was planning on doing a follow up video on how to create an installer for your electron app and I'll keep that in mind

[@ayhamala3ma189]

i will😍 am glad to see that ❤ thanks

[@IsraelQuiroz]

Your welcome! thank u for the comment and support!

[@saurabhpandey-cg5tr]

How to create a installer for your electron app ?????

[@fatalskull8954]

Man everytime I start a new Angular project it creates using typescript (main.ts) and i simply cant use typescript with electron, it seems impossibled or poorly doocumented. What the hell do I do?

[@IsraelQuiroz]

Just manually change the name of the file to .js shouldn't be that hard

[@fatalskull8954]

@@IsraelQuiroz i got massive compilation errors after doing this and chaning the references in other files like tsconfig.json… just seems simply impossible lol

[@senthilkumar-wj5gb]

Nice Explanation...

[@IsraelQuiroz]

Your Welcome :)

[@kanishksharma1748]

hey brother, how can i create the simple setup file so i only have to send the that one file only and any person can install that in there system and run the project ?

[@IsraelQuiroz]

you would have to create an installer for the app

[@IsraelQuiroz]

Check out my latest video 😉 I just did this!

[@RavikantKumar-o3r]

I wanted to share this build to client. How can I create a installer for it? Please help...

[@IsraelQuiroz]

Here you go! i already made a video on how to make an installer! If it helps a like and comment would go a long way! kzbin.info/www/bejne/bpaXfJpuqdeBfdE

[@rajsunaviya7791]

npm install electron --save-dev not install in angular project

[@akadeadahot7067]

hey did it work at your end. I tried 2 3 times but unable to install electron with npm install electron --save-dev command

[@xptrojan]

thanks, nice explanation

[@IsraelQuiroz]

Your welcome! :) thanks for the sub! welcome!!!!

[@unboxista6677]

when i run npm run command, i am getting 'Error: Electron failed to install correctly, please delete node_modules/electron and try installing again'

[@IsraelQuiroz]

you should do what the error says, u installed it wrong remove it and reinstall it

[@MilenaStojadinovic-rn9mb]

what if my main is ts, not js?

[@IsraelQuiroz]

i think it needs to be js because electron is using Node but doesnt hurt to try

[@luczztem]

brother when I run "npm run electron-build" it opens the app.js file in vscode, and not the electron app in a window... do you have any ideia of why this is happening?

[@IsraelQuiroz]

make sure the file is in the correct spot and also the script is typed correctly

[@LuisHernandez-li4fy]

This is so cool! would be awesome if you could do something similar for ios and android

[@IsraelQuiroz]

Thank you! :) in what way for IOS and Android, like package your app for mobile?

[@LuisHernandez-li4fy]

@@IsraelQuiroz yes, I think I was seeing someone use capacitor and it seemed very similar to Electron. I've been learning so much from you Israel please keep up the video tutorials.

[@IsraelQuiroz]

oh okay thank u for letting me know on that!!! ill look into it, im also curious about PWAs so that might help with that, we will see :) but happy you like the videos and thank you for being a supporter means alot!@@LuisHernandez-li4fy

[@TuningPuchMaxi]

Thank you very much for this video! :) When I try to use the packager it creates the folder but I somehow can't open it. It says the following: The folder “name-darwin-x64” can’t be opened because you don’t have permission to see its contents. I'm on mac.

[@IsraelQuiroz]

Your welcome! did u try opening it as an admin?

[@Nokarma321]

no clue about what is inside the dist folder and the link in the description is broken.. useless

[@IsraelQuiroz]

my repos are members only now and i explain what the dist is, it contains your compiled prod ready application and everything it needs don't be salty u expect everything for free

[@werthersoriginal]

I could kiss you right now... I won't... but just know I could!