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?
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.
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
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:
Change this line to:
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.