Electron app isn't finding CSS/JS included in package

Question

I have an HTML5 web app that I\'m packaging up via Electron. I\'m packaging via gulp-electron.

The issue I\'m having is that when the app is built and I run it, none

Answer 1

Turns out there were a few issues with paths.

First the CSS was using relative paths to reference images. Switching this to absolute paths did the trick. This was the same issue for the directives. Switching out relative paths with absolute paths did the trick there.

Finally, the actual CSS and JS files not being loaded looks to be because in the main index.html there was this:

    <base href="/">

Which was messing with things. Removing that allowed the CSS and JS to load correctly.

Answer 2

I found out that you need to insert the href beginning with "../" like:

<link rel="stylesheet" type="text/css" href="../src/css/index.css"/>

Answer 3

Electron approaches files through file:// protocol, so any base hrefs should start with '.'

To make it work, in index.html (in case '/' is your base href) change

<base href="/"> 

into

<base href="./">

..and the path errors will disappear.

So with electron apps we always need to compile the angular dist using a base href starting with '.', when / is your base, compile as

ng buid --prod --base-href ./