ng-electron-devkit

ng-electron-devkit is a collection of angular-cli tools to make developing an angular application for electron easier.

Installation

npm:

npm i -d @ng-electron-devkit/builders

yarn:

yarn add --dev @ng-electron-devkit/builders

Usage

• Modifiy your angular.json like this:

{
  ...
  "projects": {
    "<projectName>": {
      ...
      "architect": {
        "build": {
          "builder": "@ng-electron-devkit/builders:electron",
          "options": {
          ...
            // path to tsconfig which should be use to
            // compile the code for the electron main thread
            "electronTSConfig": "<path-to-tsconfig.json>",
            // must be relative to root configured for this
            // project. eg. src/electron
            // the source code for the electron main thread
            // must be in this directory
            "electronProjectDir": "<path-to-electron-source-code>",
            // targets for the electron-build
            // can be comma seperated to multiple targets
            "electronPlatforms": "<win|mac|linux>",
          ...
          },
          ...
        },
        // THIS CURRENTLY ONLY WORKS IF THE ELECTRON APPLICATION
        // HANDLES THE --serve ARGUMENT TO LOAD THE
        // ANGULAR APP FROM THE DEV-SERVER (http://localhost:4200)
       "serve": {
          "builder": "@ng-electron-devkit/builders:dev-server",
          "options": {
            "browserTarget": "<projectName>:build"
          },
      }
    }
  }
  ...
}

• create a directory where the electron source code is located

<projectName>
├── angular.json
├── src
...
│   ├── electron
│   │   ├── electron-builder.json <- config for electron-build
│   │   ├── index.ts <- electron main file
│   │   ├── package.json <- second package.json for electron-builder
│   │   ├── tsconfig.json <- optional: tsconfig for electron main
...    

You can find these file in the sample project.

Configuration

All configuration for the electron-builder is located in the electron-builder.json To seperate the production dependencies for electron from the angular app dependencies this project uses the two package.json structure from electron-builder. The second package.json also contains the main file for electron and metadata for the electron application (e.g. Name, Author, Description...)

TODO

• schematics for initial project setup (ng generate electron-application)
• livereload for electron code (dev-serve)
• E2E Testing with Spectron

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.