benjamindobler/ngtron

Easily serve and build angular based electron applications

NgTron

Angular + Electron = ❤️

Angular CLI extension based on Schematics and Builders for building angular based electron applications. This project uses the new architect API which was introduced in Angular 8. So you can only use this addon starting with angular 8!

Ngtron will setup your angular workspace with the finest electron tools available. Electron Builder is added to package your projects for mac, windows and linux.

Introduction

An typical electron project consists of node application which is called the main process. This main process can create BrowserWindows which contain web pages. Those web pages are called renderer processes in the context of electron. Consequently an ngtron project is a combination of different types of applications. This nicely fits with the multi project support of Angular workspaces. An ngtron project can have exactly one main (node) project and n renderer projects (normal angular projects). There is one more type which is an electron project type where this all configured. This flexible architecture allows to build electron apps which include multiple angular projects. You can for example open several windows each containing a different Angular application.

Installation

NGTron supports the ng-add schematic to setup an angular workspace. Running the schematic will install the @richapps/ngtron packages and setup further dependencies like electron-builder.

ng add @richapps/ngtron

Setup

The recommended way of using ngtron is to use multiple projects for each type (main, renderer, electron) in an angular workspace. Beside that ngtron also supports root level projects which do not use multiple projects by adding the main process and electron files inside the renderer project. Here you will find an overview of the different setups.

Creating an application as multiple projects in a workspace (recommended)

ng new workspace --create-application=false ng add @richapps/ngtron ng generate @richapps/ngtron:app

You will be prompted for a project name. Let's assue you choose my_app as the project name.

This will generate three projects in your worspace.

• myapp-electron This projects holds the electron specific configuration and assets like icons for your electron application.

• myapp-main This projects is a node project which will used for the main process of your application

• myapp-renderer This is the angular project where you can define your renderer code (Note: you can add more renderer projects if you for example want to open different angular apps in different windows of your electron app).

You can now run your app with: ng serve myapp-electron And package your app with: ng run myapp-electron:package

Using an existing angular project as the renderer for an electron app

ng add @richapps/ngtron

`ng generate @richapps/ngtron:app --project=

Create a root level ngtron project

ng new <my-project>

ng add @richapps/ngtron

ng generate @richapps/ngtron:app --project=<my-project> --singleProject=true

Adding ngtron to an existing root level project

ng add @richapps/ngtron

ng generate @richapps/ngtron:app --project=my-existing-project --singleProject=true

Run app while developing (with hot reloading)

ng run project:build-electron

Builds the app and opens it in an electron window. Uses hot reloading whenever your code changes.

Package your app

ng run project:package-electron

You can customize your build settings in the angular.json. There you will find all the settings which you can use in electron-builder.

Serve app in the browser

ng run project:serve-electron This will serve your app in the browser even if you use node or electron apis. Example will follow.

ngtron's Issues

ng-add schematic should hook up node

@types/node should be added to dev deps and node added to tsconfig of the project.

V2 Features

Planned features for Version 2:

• dedicated (node) builder for the main process
• build main process also with webpack
• support for multiple renderer targets for one electron project
  this will allow to have seperate ng apps in different windows of the same electron app
• dedicated browser/dev-server builder which allows to dynamically pass a custom webpack config.

What's the maintenance status of the project?

Hey @BenjaminDobler, again, congrats for the great job 👏🏻

I'm planning to mention ngtron during my keynote session on AngularConnect next week. I was wondering if the project is still maintained and whether you're using it for your projects?

InvalidConfigurationError

Hi,
I am getting the folowing error on windows 10 :
Error InvalidConfigurationError: Build for macOS is supported only on macOS, please see https://electron.build/multi-platform-build
at C:\Users\cisse\angulardemo\angular-desktop\node_modules\app-builder-lib\src\packager.ts:408:15
at Generator.next ()
Thanks

[error] Error: Project does not exist.

I can run ng serve and I will get no erros but ng run project:build-electron wont be able to run

My package.json name matches my angular project
and my tsconfig uses es5

which is what normally causes this error from what I investigated on stack.
here is the output.
angular-errors.log

Electron 5?

I noticed that the current Electron version is 4. I changed package version to 5 and it seems to work, so maybe it's worth updating electron 5 in the schematics?

Don't work hot reload

Don't working hot reload via ng run project:build-electron

Current behaviour: when you change any file and save them, app does not reload.

Node.js - latest version
Angular 8
Angular CLI - latest version

`npm run myapp:build-electron` fails

Using newly released Angular CLI 8.0.0, I do, ng new myapp, select yes for routing, and SCSS for styling, and the app is generated. Then I cd into the folder and do ng add @richapps/ngtron. This command succeeds, however when I try to run ng run project:build-electron I get the error:

ENOENT: no such file or directory, copyfile 'C:\Users\Elchin\Projects\myapp\src\electron.ts' -> 'dist\myapp\electron.ts'
Error: ENOENT: no such file or directory, copyfile 'C:\Users\Elchin\Projects\myapp\src\electron.ts' -> 'dist\myapp\electron.ts'
    at Object.copyFileSync (fs.js:1724:3)
    at C:\Users\Elchin\Projects\myapp\node_modules\@richapps\ngtron\builders\build\index.js:47:18
    at Generator.next (<anonymous>)
    at fulfilled (C:\Users\Elchin\Projects\myapp\node_modules\@richapps\ngtron\builders\build\index.js:4:58)
    at process._tickCallback (internal/process/next_tick.js:68:7)
    at Function.Module.runMain (internal/modules/cjs/loader.js:745:11)
    at startup (internal/bootstrap/node.js:282:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:743:3)

option --port is not working

When using ng run ngtron I cannot use the option --port. Please support this and other options from the angular cli

Typescript compile errors in default electron.ts

I got this kind of errors from typescript compiler in src/electron.ts:

Error:(3, 9) TS2305: Module '"../../../../../Users/MyUser/my-project/src/electron"' has no exported member 'BrowserWindow'.
Error:(3, 24) TS2305: Module '"../../../../../Users/MyUser/my-project/src/electron"' has no exported member 'app'.

Any ideas why?

Mi environment:

Angular CLI: 8.3.6
Node: 12.9.1
OS: win32 x64
Angular: 8.2.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
... service-worker

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.802.2
@angular-devkit/build-angular      0.802.2
@angular-devkit/build-optimizer    0.802.2
@angular-devkit/build-webpack      0.802.2
@angular-devkit/core               8.2.2
@angular-devkit/schematics         8.2.2
@angular/cdk                       7.3.7
@angular/cli                       8.3.6
@angular/fire                      5.2.1
@angular/flex-layout               8.0.0-beta.26
@angular/material                  7.3.7
@angular/material-moment-adapter   7.3.7
@angular/pwa                       0.13.9
@ngtools/webpack                   8.2.2
@schematics/angular                8.2.2
@schematics/update                 0.803.6
rxjs                               6.5.2
typescript                         3.5.3
webpack                            4.38.0

Electron package dependencies should be added to webpack externals

Add default icons to electronResources