If you can build a website, you can build a desktop app.
That’s true if you know how to write Javascript code, you can build a desktop applica...
For further actions, you may consider blocking this person and/or reporting abuse
Hi Ahmed! When running "npm run electron" for the first time, it shows a blank page. Have you ever had this problem? Thanks for the post!
Hi Borja, the blank page means that the angular application has some error usually because you forget to end some tag, so can you check the DevTools console?!!
To open it select toggle DevTools from the toolbar or add win.webContents.openDevTools(); after win.loadFile(resolve('build/index.html'));
This is what it shows.
thepracticaldev.s3.amazonaws.com/i...
It seems that your win.loadFile(); has a wrong path make sure that the path at this function located the index.html of the built application usually it lives at
dist/your-app-name/index.htmlIt seems that I forgot the
your-app-namepart at my post I'll update it.Here is my project structure: thepracticaldev.s3.amazonaws.com/i...
And here my main.ts file:
thepracticaldev.s3.amazonaws.com/i...
Okay,
dist/control-panel/index.htmllooks good but the output of thetsc"the main.ts file" where is it?!! I see that you haveout-tscdirectory if themain.jsfile is at this dir update youpackage.jsonreplacedist/bin/main.jswithdist/tsc-out/main.js.Can you upload your project to GitHub? or you can refer to the repo I have mentioned at the post so you can find the right structure.
Tell me if you still have an issue.
There it is: github.com/borjalo/control-panel
As I mentioned it was the output of
tscfixed hereThank you very much!
Let me know if you have any issues
Hi Ahmed,
First of all thank you for the example you put together. Nevertheless i get an compile error, when starting it with "npm run electron" right after the step where you modify the package.json
You add
"main" : "bin/main.js","scripts": {
...
“electron”: “tsc bin/main.ts && ng build && electron bin/main.js”
}
to the package.json, and that leads to a compile error:
...
error TS2583: Cannot find name 'Map'After some digging I found the solution [1] to the problem.
If you add the following script:
“electron”: “tsc bin/main.ts && ng build && electron bin/main.js”this leads to the fact, that the type-script compiler does not as intented. When calling tsc with a file-name parameter, then it ignores the tsconfig.json, therefore we have to add the following to the script:
“electron”: “tsc && ng build && electron bin/main.js”et voila, problems solved.
Thank you for the post!
[1] for reference: github.com/Microsoft/TypeScript/is...
Ftf, sorry for not replying earlier, thanks for noting out this issue, I'll review my post and update it if needed, also you're very welcome to contribute for the Github repo if you see any fixes or updates.
Hi Ahmed!
Thanks for the post.
I followed along until the part using ngx-electron but when I get to that part, I don't have access to process, or any other property on _electronService (they are all null). However, this._electronService.isElectronApp returns true so the app is running inside Electron.
On checking your Github repo I see it was updated recently and looks to no longer use ngx-electron? In addition the scripts are different in package.json, and the bin folder has disappeared with bin/main.ts being replaced by main.js.
Just wondering the reason for the changes - is it a problem with ngx-electron?
Hi Nick!
It's good to hear that the issue has been solved 👍.
I updated the repo
cause I was using Angular 7 and Electron 4 while writing this post and those are outdated now, and no, there's no problem withngx-electron` but we don't need it anymore with the latest versions of Angular and Electron.I'm going to update this post very soon in order to be compatible with the latest versions of Angular and Electron, and I'm going to make the demo app actually does something instead of being a blank app, so, STAY TUNED 🚀.
Awesome, thanks Ahmed! Looking forward to the new demo app 👀 👍
EDIT: I solved the issue by updating my main.ts file to include webPreferences, as follows:
const { BrowserWindow } = require('electron')
let win = new BrowserWindow({
webPreferences: {
nodeIntegration: true
}
})
Hi Ahmed! thank you for the example. Can I ask on how to self-update(versioning) the desktop app using this angular-electron?
Hi pi, sorry for the late reply, and very good question 👍 I'll make a new post for that and let you know when it's published.