Native Desktop Apps with Angular and Electron
ฝัง
- เผยแพร่เมื่อ 18 ก.ย. 2024
- Build native desktop apps with Angular 4 and Electron 1.7. In this lesson I create a simple timer app, then package it for Windows, MacOS, and Linux. Full Lesson at angularfirebas...
Source Code: github.com/Ang...
Electron: electron.atom.io/
Angular: angular.io
![HIWWHEE | OHM [Official MV]](http://i.ytimg.com/vi/OJJLtTLqLag/mqdefault.jpg)
if the command "npm run electron-build" doesnt work, try changing the line "electron-build" in "package.json" to "ng build --configuration production"
thanks sir
This is fantastic and I had to pause a couple of times to see but still if someone wants to see how things work in a short time the video is awesome. Keep up the great work!
Some fixes for Angular 9. Got it completely working, but don't remember everything I did. also did the edits mentioned by the other comment for Angular 8
Also make sure to check the stylesheet from the github, since thats pretty important. Think he used Bulma as well.
1. Changes in imports
import { interval } from 'rxjs'
import { takeWhile, tap } from 'rxjs/operators'
2. changes in the start() function
// can't name interval anymore since we're importing interval instead of Observable.interval
const duration = interval(100);
duration.pipe(
takeWhile(_ => !this.isFinished),
tap(i => this.current += 0.1))
.subscribe();
)
When they copy-past-blast through the code it makes me feel insecure as a programmer.
dont worry he already wrote out the code before, you can see him just paste it in
The code in this kind of videos is pre-made so viewers don't get annoyed
I think they have their files open and they delete stuff from it, then Ctrl+Z through the files.
@@acerIOstream aaaaaaaaah. That would be pretty clever.
It's mostly just his style. He moves very fast through things, because his idea is you can stop and slow down if you need to, but he shouldn't force you to slow down if you don't have to. So a 10 min vid from Fireship could easily be a 40 min tutorial from someone else. He's just going that fast.
If you are getting errors running the App (something about MIME), change the target platform in tsconfig to es5.
this is pretty far out of date by now, just to name a few locations where this has changed: `rxjs/Observable` is just `rxjs`, the dist location has slightly changed `/dist/angular-electron/browser/index.html`, to even be given a app.module.ts file you have to use the `ng new my-app --no-standalone` flag, `ng build --prod` is now `ng build --configuration production` in the electron-build script. Those are just the corrections I made before finally giving up on this one. love and respect
Great video! I love the pace. Short and to the point.
I miss the old Fireship, iconic 😢
in package.json if you want electron to build and run make sure it's "electron-build": "ng build --prod && electron . "
What is the background music? Sounds very great.
Please reply
oh god why aren't all youtube tutorials like this?? love it, straightforward and exciting!
If you have the error "Not allowed to load local resource:..." for the index.html method, change the win.loadURL method. Require 'path' and 'url' libraries first and then use this method instead:
win.loadURL(url.format({
pathname: path.join(__dirname, 'dist/index.html'),
protocol: 'file:',
slashes: true
}))
Thanks for sharing this fix!
how do i declare the url?
Got it. I needed these to import at the top.
const url = require('url');
const path = require('path');
Thanks got same problem and your solution is the only thing that works out of many i have tried.
Hi there! I´ve got the error and I´ve applied your fix, the problem persists tho... I´m working with Angular 6, the code should work anyway, shouldn´t it?
problems I encountered while making this project as described in the video and their solutions :
1. remember that you have to keep main.js at the package.json level and index.html inside the src folder.
2. faced some errors due to my typing mistakes like the spelling of 'BrowserWindow' and 'loadURL'
3. while giving the path in main.js , I found that the way paths are written in the video is not working for me . for me following way worked :
const url = require("url");
const path = require("path");
win = new BrowserWindow({
width:600,
height: 600,
backgroundColor: '#fffff',
icon: `${__dirname}\\dist\\assets\\logo.png`
})
and instead of win.loadURL(`file://${__dirname}/dist/index.html`)
use :
win.loadURL(
url.format({
pathname: path.join(__dirname, `/dist/index.html`),
protocol: "file:",
slashes: true
})
);
(the OS that I am using is windows 8.1)
4. remember that you have to use back ticks while giving paths instead of normal quotes
5. Initially I didn't know that what __dirname does , later I realized that it gives the value of the path automatically
6.in package.json > script>electron-build , update the command to "ng build --prod && electron ."
at the end I would like to say thanks to @fireship for making this video , and also thanks to @robertWalter , @brianWright , @georgeHatoutsidis for their comments , and @pravin bhai for recommending this video to me.
Hey Mitesh. Thank you so much for sharing this. I'm still having trouble in the _dir part. Getting error file not found. I thinking, I haven't properly put the file directory. Could you PLEASE put a real time example for that line??
very nice but I cant seem to use this method using TS. I want TS, not js.
This is what I needed! short, precise and straight to the point! Any advice that you can give me if I already started my electron project and I wanna use angular with it? For the nested/routed components, is it the same routing for angular?
I love this video. I'm a web developer and trying to get involved with desktop apps development. Is it possible to display an app running on desktop (written in any language, say VB or C++) inside electron (in one of renderer process) ? It'll be like woking on native desktop app but inside electron renderer process (chromium window). For example in its simplest form: we all use notepad as a separate application. What if we open an electron app and in one of the renderer process window we have same notepad (notepad.exe) and should be able to perform all operation (read/write).
Please let me know if this something I should be even thinking about? If so then what should be the right direction I must be moving on.
Thanks much for help :) happy coding
for structured application thought to get the file css on git
to have colored buttons it is necessary to copy /paste the address of the bootstrap dependency on scr / index.html
Id be interested in an updated version of this video
Thank you for this videos, really impressive. I love the combination of angular and electron. Did you thing that i can use spring-boot for the backend treatment ?
As long as the springboot backend returns a JSON responce, its possible
@@SisirKumarPathy i confirme it. I developped a small app that embeds a springboot on startup and it s work fine
Thx :) great and short video. Helped alot to get in touch with electron.
Jeff is my favourite tech youtuber!
Great tutorial !!!!!!! please, please !! can you show a example of compilation using "electron-builder"
typescript is there to help you, you just have to specify the types.
Nice work, helped a lot, I have a question, Are electron apps compiled?, Can the app be decompiled ones compiled?
medium.com/how-to-electron/how-to-get-source-code-of-any-electron-application-cbb5c7726c37
Check this link
Brilliant video! Electron is so cool. Any other document or blog which can list down the pros and cons of using this library?
Sir Please make a video with python backened.
Great Work, were learning a lot from you. Thanks.
Liked and subbed! Awesome tutorial dude thanks. What color theme are you using in VS code?
atom one dark w/ vscode icons
Thanks a lot
if the command "npm run electron" didn't work, try changing the line "main" in "package.json" to ".src/main.js"
Do you know how I can make the reload work in electron? If I reload the page, it takes me to a white screen
If you try to run this and the angular boilerplate app (for example angular 6 cli generated app) doesn't load into the window, try uncommenting the win.webContents.openDevTools() line. Your url is probably not correct.
Great vids but sometimes I find myself rewinding or pausing just to give myself a few sec to ingest what you said. So the tempo is just a tad too high for me personally, could be slightly slower and less ad/hd at some points. Give it a second to sink in every now and then.
IMO this is major advantage of those videos. You can pause or press left arrow when needed, but when you need to recap information the speed is more than perfect.
I am fully in agreement with Marek
The tempo is great. I’d rather pause than have to scroll through a 30 minute video to try finding the section I need again.
Like you'r videos ,they helps me.What's the operating system you use?What's distrib of linux?
Thank you! Ubuntu 16.04
This is very good but how would solve the issue of blank white screen everytime you reload the app
www.christianengvall.se/electron-white-screen-app-startup/
Electron white screen app startup
hey, it is showing something different app from my side in the start
it is not showing the angular page but the electron page
Really nice video and very helpful. Can you make one with electron and react?..
awesome video ! can you make a tutorial of electron with sqlite3 please ?
Hi a small doubt - can a widget application/pop up notification be made using electron with java/spring as back end..please let me know. I would like to create an app which notifies users about as soon as a batch job fails, basically it alerts the user by coming as a pop up in notification tray and also show in desktop widget. Please suggest tech stack or how to implement this. Thanks in advance.
I get i white page, i think is by the index.html and te build, what i have to do?
Setting href='./' breaks the routing when using ng serve
Hi, how do you automate the text input, is it macros? an extension? a third-party software?
Mine is not working. I noticed that on the command line it says " ng build --prod" , while yours says " ng build --prod && electron ." ... Could someone explain why it isn't running the second command of electron . ? ... I was also able to run it on the web using the localhost url. And I get the same results above.
Hi there
change this in your json file
"electron": "electron .", //
Nice 1.... Please tell how can we use Angular4 Routing in this electron app?
but after buid we want to go to build folder for star can have any idea how to install this exe file
Hi nice video. Thanks for sharing. When and where did you create the dist/index.html? When I run I get loading... on a white page. how do I get it to load my components?
I don't think this tutorial works well with the latest version :(
Nice thanks TEAM 👍👊💪
great video sir.
Does Electron have access to desktop's camera/webcam?
I have some doubts 1. Can I capture automatic screenshot
every x seconds 2. Can I know the app and domain usage like domain.com spend 5 hours, photoshop spend 2 hours, skype 30
minutes.like that
Can I run electron desktop app exe file stand alone? Or I need all the files in the folder/directory to run the app in other system which do not have angular and electron installed on it?
Hey!
Why after I type import { Observable } from 'rxjs/observable'; make error in { Observable }.
Please answer me as soon as possible.
Thank you,
How can i change the electron title bar and menu on windows ??
and how can i change the color of my title bar and how to customize it???
how to work with node modules with angular/cli in electron app? (fs, path, ... etc.)
please can you add a tutorial to this using jhipster angular generated app
this could be really helpfull
You really got useful tutos
One of these days someone will create an installable "container" that allows you to just drop in folders containing whatever code (and type of code) you want to run, and it will just "run" without all the dumb configuration of files to get something stupid like Electron to run it.
Has anyone had problems with Angular 5 - "@angular/core": "^5.0.0" ? The project compiles and the desktop app gets created, but there is no image or text on the app (no content whatsoever).
code: github.com/marcosmcb/angular-electron
i have the same
Same with moi! did ou end up fixing the issue?
Got mine working by adding the "." at the end "electron-build": "ng build --prod && electron ."
also in the index.html file if you look in the developer tools you might see that it can't find a bunch of files.
Hi i have a small problem, after building the executable using electron builder the whole source is open, I mean anyone can go into the resources folder and edit the code and change the app! Is there any method of building the app into a single executable or hiding the source?
Thanks :-)
This is great but how to do it with node modules and REST Api
Really, is very easy, i will tried it!!
Is it possible to 'npm run electron-build' every time webpack compiles?
Omg. 200mb+ ....
This can be optimized of course, but that's one of the tradeoffs of using a framework like electron. github.com/electron/electron/issues/2003
It's a desktop app dude, so what, nothing needs to be transferred over the wire. If was needed to load every time as a web app then I'd worry.
if zipped comes to 30MB! Now what was that you were saying?!
1) NodeJS is not in any way a web server or intended to be used strictly on the server, that's a misunderstanding that came about given it was one of the first ways people used NodeJS and tons of people just assumed that. many articles were since written that it's original purpose was not a web server.
2) Yes it is suppose to supplement it, also scientifically anything new is hipster by definition, as-in all human progress in the day-in-age it was created. I don't disagree that web development does have a large memory footprint but as with anything in computing or humanity in general theres tradeoffs on virtually anything you say, do, make, or use.
If your goal is to make the most efficient memory-conservative app cross-platform then you really need to be using native tools of the operating system along with an operating system compiler - that's the best way to make the most efficient app. However the tradeoff is cost, lots and lots and lots of cost. It requires you to create completely separate projects in possibly completely separate languages (sometimes, like MacOS) and use completely different API's and frameworks, and tools, and compilers where your trying to at least try to share as much code as you can. Then you have to maintain all these code bases, keep them optimized in their own way (That was the original purpose of going this route) and send out updates, fix bugs (given your able to locate them), the list goes on. Of course you have to master all these tools as well. Up til now humanity didn't really have much of a choice. You can use various cross-platform solutions that are still more optimized but it still requires quite a lot of work (In many cross-platform solutions for example the round progress bar would have to be manually drawn in GUI code and anything manually drawn introduces extra complications by far and large) ---- Qt would probably be the most ideal compiled code but it still has a memory footprint and it's packaged version can be enormously huge.
Javascript offers the tradeoff of size and memory footprint, I agree, but companies are using it on desktops because your average computer can handle it much better and look at the advantages. One single code base that's fairly small and simple can run anywhere, on any platform, on any version of web browser, in any web browser, on any computer going back to the first web browsers ever made. It can turn on and off features, adapt, and flex to any environment...... That's why it's taking off. The cost is simply not remotely on the same level. Instead of dealing with font metrics and such you can just use css to say "Make this font big and look like this" all in less than 3 lines and it will work anywhere that supports those 3 lines on any resolution, device, display, you name it....
3) Javascript is a compiled programming language like any other programming language (Assuming you don't think Javascript is still interpreted using the old traditional model from the 90's, javascript code now runs pretty close to C code and I've seen cases where it long supasses some C code in speed ) You are correct in that Javascript doesn't use typesafety or have such concepts but it's not the only language that doesn't do that and there have been plethoras upon plethoras of programs written in traditional Javascript that run just fine. Your argument is invalid and again there are other languages that do this as well and they've been host just as well to lots of written programs that worked just fine. Theres no one right way to program, it's all machine code at some point. Just as type safety is great it also had it's drawbacks like anything else, arguments can be made for and against it and there lots of successful projects that use both typesafety and non-typesafety code.
"Hipster"'s first usage dates back to the 1940's...it's pretty damn old.
How do you make a .deb file out of it and how do you make an installation wizard?
What's that font you're using in VSCODE?
Super useful
Is there a way to access NeDB directly from angular app?
i tried this tutorial with angular 6 and electron 2.0, the app build successfully but exits automatically without launching. any idea on this please
Is this app still able to debug in vscode ?
It's a 200MB mac application! Wow! Is that normal? and can it be shrunk??
Great video !
what is the command for linux
Can I somehow reach auto recompiling and reloading electron on code change, like I do with "ng serve"?
try this, I use it and it works well and its updated to angular 11 and electron 10 and works out of the box for me. just do like the repo says and only use npm, I tried yarn just to see and I started getting a bunch of type errors in the dev console.
github.com/maximegris/angular-electron
why does it run "electron" after "electron-build" in 3:25?
When I open the .exe file it throws javascript error.
Win10 only? Will it run on Win7? I have an 8k network of win7 machines with no plans for a Win upgrade in the near future. We may be moving to another OS but for the near future(1.5 years) we are on Win7 64bit.
It should run on windows7-64bit. github.com/electron-userland/electron-packager#supported-platforms
Yes works on 7, just tested today
How to make angular component interact with electron?
thanks for sharing bro, really great vdo :)
Love this channel!!!
Can I use this method with vue.js ?? If possible how ??
"ng build --prod && electron". Exclude the `.` after electron.
How to package it for ubuntu?
why does he put the dot after angular-electron? as in "angular-electron ." he does it in the package.json as well in "electron": "electron ."
to specify that the command should run at the current directory, so it's the same if you just type:
electron {{file path}}
Is it really native? Or just regular "web view" electron
why do you pronounce compilation as in compilaeetion or something like that.
Great video!!!!
Thanks a lot man....
awesome 👍
Thank you!!!
so useful! thx.
loved the video
kiki, do you love him? his the greatest..there might never ever be anyone like him.....his my tutor and I am down with him always
wat
This is really help 👍🏼
Cool, thx.
This is awesome!
man, you got right to the point nd are quick, that's great
Too bad this tutorial is wrong
66MB for hello world app? m'i doing something wrong ?
No, is normal. One of the weak point of Electron
wow this instructions are so vague ... might as well read through the documentation ... moving to the next video, you might want to think about taking some lessons on instructional design
Hi, This is the best tutorial for angular 2 with electron that i've seen by far... but, when i get the .exe i cannot move into other folders or it won't get executed because some dlls are missing...-Thank you.
Don't move the .exe file around. Just make a shortcut to the file and move that around.
the build command is supposed to be " "electron-build": "ng build --prod && electron ."" u forget the 2nd half when showing it and had it addeed when executing. i was wondering why the hell my shit wasnt poppin up.
Is it only me? I couldn't install electron into a freshly generated angular project.