I started working on a new Electron application using the Angular CLI and found a solution to a show-stopping problem that I thought that I should share.
What is Electron?
For those who haven’t heard of it, Electron is a technology that combines Node and Chromium and allows Web developers to build desktop applications using their skills with HTML/CSS/JavaScript. Electron was built by Github as a shell for their Atom coding tool. Slack and Microsoft’s Visual Studio Code are built using Electron. Take a look at some of the applications out there that were built using Electron.
What is the Angular CLI?
I decided that I would build my new desktop application with Angular 2 which is currently in the release candidate stage. I also decided I was going to use the new Angular CLI — currently in beta — to assemble this application. The Angular CLI allows developers to assemble an Angular 2 application quickly and easily. If you are interested in using Angular 2 you should really take a look at Angular CLI.
The Problem
After using the Angular CLI to create an Angular project, testing that project as a Web project (outside of Electron) making sure it works, I fired up the Electron app and loaded the project. I was immediately presented with the following errors in the console:
GET file:///ember-cli-live-reload.js net::ERR_FILE_NOT_FOUND
GET file:///vendor/es6-shim/es6-shim.js net::ERR_FILE_NOT_FOUND
GET file:///vendor/reflect-metadata/Reflect.js net::ERR_FILE_NOT_FOUND
GET file:///vendor/systemjs/dist/system.src.js net::ERR_FILE_NOT_FOUND
GET file:///vendor/zone.js/dist/zone.js net::ERR_FILE_NOT_FOUND
The Solution
To me, these errors made no sense. It probably won’t make sense to anyone else. It took a few tries and Google search key words for me to find this problem and solution on Stack Overflow so I thought I’d mention it here to hopefully give it some more weight with Google. Special thanks to the mysterious Alex P for taking the time to publish this solution.
The solution is fairly simple. In your Angular application’s index.html that was generated by the Angular CLI find this line found inside your head tag:
<base href="/">
Change this line to:
<base href="./">
After making this suggested change my errors went away and my Angular application worked perfectly. From this point I was able to run the ng build --watch command in terminal to watch for changes in my Angular application’s code and simply refresh the Electron application to see the changes.
It is my hope that this tip saves people some grief. Good luck.