Build a Desktop Application with Angular and Electron

Developer Blog Comments
1

Build a Desktop Application with Angular and Electron

This tutorial shows how to link your Alexa skills securely.

2

Ramya Pal

Hi,

I am new to electron and angular. I am following your tutorial to build an application . Below line is throwing error and unable to fetch files.
{withFileTypes: true}

Can you help me fix the issue.

3

Matt Raible

Can you please compare your code to the example on GitHub? My guess is you might have different versions of packages.

4

Ramya Pal

Thank you !

5

Ramya Pal

I found another difference as well in tsconfig.json. “target” attribute had the value “es2015” this was leading to just blank white screen with console error “Failed to load module script: The server responded with a non-JavaScript MIME type of “”. Strict MIME type checking is enforced for module scripts per HTML spec”. By changing “target” to “es5” worked fine.

Before : target: "es2015"
after : target:"es5"

after change, able to load html files without any issues.

6

Krishna_1029

Hi I was following your blog, but I am getting the below error

https://uploads.disquscdn.c…

7

Krishna_1029

Was able to fix it by setting the nodeIntegration to true, while creating the BrowserWindow

mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})

8

Matt Raible

Thanks for letting us know. I don’t see this code in the tutorial. Do you know how it’s created?

9

Krishna_1029

If you are following this article, after you create main.ts file, you can find the main.js file generated inside the elctron>dist folder in the folder structure, there you will have to make changes in the BrowserWindow properties.

10

Rustam

it’s not an unfortunate decision because that Electron.

Native app with Angular may be NativeScript for mobile, and Desktop: Angular Nodegui https://github.com/irustm/a…

11

Luani_ Madh

When I download the GitHub files, execute npm install and npm run electron the following error shows up:
(node:4700) UnhandledPromiseRejectionWarning: #<appautherror>
(node:4700) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of
an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:4700) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that
are not handled will terminate the Node.js process with a non-zero exit code.

12

Matt Raible

Did you put your Okta app settings in electron/flow.ts? I just tried this and was able to login.

13

Moriuks

Hey Jeffersron,

thanks for the post,very cool

i keep getting this meesage:

{
“error”: “access_denied”,
“error_description”: “The requested feature is not enabled in this environment.”
}

any idea why?

14

Matt Raible

This might happen because you’re using an IT Trial account, which doesn’t have API Management by default. If you create a forever-free developer account, it has API Management by default.

15

Bobsilvio

Work, but after 24 hoursit only works for 24 hours after logging in. Then missing the refresh tokens?

16

midhilaj m

Did google sign will work on this?

17

Matt Raible

Yes, you can add Sign-In with Google. Here’s our documentation for how to do that. You’ll need to configure a custom domain and customize the hosted sign-in widget to make this work. I recently published an article on how to do this with Cloudflare.

18

Matt Raible

Thanks for the link! Have you been able to get NativeScript working with Okta? The last time I tried, I was unable to make it work.

19

Yawns Vast

Make a little change in code and then build angular and electron to see the result…
This process is too time consuming…
I hope there is a better way…!

20

Ketan

Can anyone please explain me, why angular is needed to build electron app? I want to build electron desktop app to call few webservices to process some data in excel. Will electron app fulfill my requirement?