Angular Electron Builder

This module contains a builder that supports building Angular applications targeted for electron. Specifically, this electron builder sets the webpack config's target option to electron-renderer. With minimal changes to your project's configuration you can use native node modules from within Angular applications that run using Electron.

Installation

Follow these steps to setup an Angular application using this builder.

1. Create an Angular project

Create an Angular project by running ng create. You must use Angular CLI 6 or above.

2. Clone this repository as a submodule

Clone this repository as a submodule by running:

git submodule init
git submodule add [email protected]:starlight-public/electron-builder.git electron-builder

3. Update your Angular configuration to use this builder

Edit your angular.json file, at the root of your project, and change the builder attribute on the project architect build entry. Change the value of builder to "builder": "./electron-builder:electron". Your config file should look something like this:

"projects": {
  "app-name": {
    "architect": {
      "build": {
        "builder": "./electron-builder:electron",
	    ...

4. Update your app's TypeScript config to resolve node modules

Edit your application's TypeScript config at src/tsconfig.app.json and delete the empty types array if there is one in the compilerConfig object.

5. Install electron

Run npm install --save electron

6. Configure the application to load using relative URLs

Open the src/index.html file and change the <base href="/"> tag to <base href="./">

7. Setup the Electron entry point

Create a file named main.js (or whatever you want really) and set it up to open an Electron browser window and load the index.html file in the dist folder. For an example you can look at the main.js file in this repository (you can use this script as is but make sure to change the app name to match the name of your app)

Then edit your package.json file and set the main attribute to the path to your main.js file. If main.js is in the root of your project then set "main": "main.js".

Building & Running your app

To build your app run ng build, ng build --watch, or ng build --prod just like you normally would.

To start Electron run ./node_modules/.bin/electron . from the root of your project.