Electron is a platform to develop desktop applications using web technologies like HTML, CSS and JS. Integrate a ng-cli application with Electron is more straightforward that it may seems.
If you are familiarized with Electron you may remember the two package structure. We will use a similar structure, but with a key difference: In a regular two package structure, the
/app/ folder will contains the Electron app. We will name this folder
/electron/ and another
/app/ folder inside will contains our compiled Angular application.
It may seem like we are using the two package structure, but we are just separating the Electron part from the rest of the application.
- Create a script in our Angular application
"electron:start": "ng build --watch -op=electron/app"
This will build the Angular app inside an app folder inside our Electron folder app, and will rebuild on every change.
- Add the new output folder into
- Modify the
basetag of the
index.htmlof our Angular app, as follow:
Adding a dot before the slash will allow Electron to find the served files, and without a
404 error will be threw.
This will be all the modifications that we need to integrate the application with Electron.
- We need to create a
electronfolder inside our project. Inside we are going to run
npm initcommand to create the Electron
package.json. This folder will be our Electron root folder.
- We add Electron as a development dependency.
npm install -D electron
- We create the entry point for our Electron program.
Open a terminal and move to the Angular project, and run
npm run electron:startto start the Angular application.
Open a second terminal and move to the
electronfolder inside the project, and run
electron .to start the electron application.
You should see a window with the Angular app running inside of it.
We now have a very simple Angular application running inside of the Electron renderer process. If we modify something of either, the Angular app, or the Electron app, we need to close the Electron window and run the
electron . again. This could be optimize using plugins and build systems, but this is the out-the-box behavior of Electron.
ts-node, or a build system.