kaffiend / electron-angular-ngrx

An Angular (6x) Electron seed featuring @angular/cli, @ngrx/platform, and Typescript. Complete with HMR workflow

Electron Angular NGRX

Dev Dependency flags are from Karma, will update as they do.

Mission

• The mission of this project is to provide a simple to use quick start seed that works with @angular/cli. This is to keep this seed's build and development process easy to maintain and build on.
• Embracing @angular/cli and @ngrx/platform to it's fullest, including @ngrx/schematics for the CLI. @ngrx/schematics is not released yet, but we will keep up with the nightly builds as it progresses towards release as some of its features make developing in the platform extremly efficient.
• This seed takes a low impact approach to some of the issues plagued by angular electron seeds. This seed uses minimal approach to instead proxy the electron window, instead of reloading through services such as electron-connect. All building and serving is still done by the CLI. We just proxy the connection to the CLI services via scripting. All STDOUT output from the CLI during tasks is passed through to your process so you can still see it working in the background.
• We will make an unrelenting effort to keep this seed up to date. We use it internally for own projects and thus keeping everything upto date is paramount. This seed will stay paralell with our own private servers on the 'master' branch.
• Gulp has been removed for simplicity and performance.

Table of Contents

• Electron Angular NGRX
• Mission
• Table of Contents
• Getting Started
• Project Structure
• Build Process
  • Build - HMR (development)
• Contributing
• ToDo
• angular/cli
  • Running unit tests
  • Running end-to-end tests
  • Further help

Getting Started

• This project requires Electron, Gulp, and Angular CLI.
• See angular/cli for CLI version.

npm install -g @angular/cli
npm install -g electron
npm install

npm start is the default task that launchs the HMR development workflow.

Project Structure

├── dist                <--Angular Build Artifacts
|  ├── electron         <--Electron Build Artifacts
├── e2e                 <--End-To-End Tests (Protractor)
├── src
|  ├── app              <--Angular App Code
|  ├── assets           <--Images, Fonts, Icons etc.
|  ├── electron         <--Main Electron Process Code
|  ├── environments     <--Dev, Prod, and HMR Environment Files
|  ├── hmr.ts           <--HMR Bootstraping Utility
|  ├── main.ts          <--Angular Entry Point (HMR Logic Included)
├── typings             <--Custom Typings

Build Process

Build - HMR (development)

Run npm start (default script), and launch the HMR Workflow.

Contributing

Pleaes review the CONTRIBUTING guidlines.

ToDo

• Integrate HMR (Hot Module Relplacement) workflow.
• Clean up tasks in a uniform manner and self-documenting.
• Integrate simple NGRX with HMR.
• Electron packaging.
• Integrate developement extensions redux, devtron.
• Add Compodoc.
• Native Module Support.
• Add contribution guidelines.
• Add Conventional Changelog.
• Wiki for adding @angular/material.
• Wiki for adding Bootstrap.
• Wiki for local FontAwesome for packaging.

angular/cli

This project was generated with Angular CLI version 1.6.3. This project is currently maintained and was upgraded to version 6.1.2

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

electron-angular-ngrx's Issues

Feature Vote: NGRX-FORMS

Issue for tracking votes to add @MrWolfz ngrx-forms functionality and examples.

No native module support

Reproduction steps:

1. Clone and install this seed as described in the README.md.
2. On app.component.ts, add the following require():

   const { ipcRenderer } = require('electron');

With gulp command, the following is displayed in red in Electron's console:
Uncaught TypeError: fs.existsSync is not a function vendor.bundle.js:426

With ng test command, the following is displayed in red on the terminal:
Error: Can't resolve 'fs' in '.../electron-angular-ngrx/node_modules/electron'

how to use sqlite in electron+angular6

hi, @Kaffiend . as the title, if I want to read data from sqlite, how could I do it? could you give some advices or demo code? thanks

Ejected CLI Feedback

The aim of this seed is to have as clean an interaction and integration with the angular CLI as possible. Currently with native modules, I see no other way to handle those without ejecting the CLI, which is something I did not want to do. I'm opening this issue to get everyone's feedback as to the direction to take the seed to remain CLI friendly.

What your thoughts on ejecting the CLI?

Suggest an alternative to ejection?

Feature Vote: FONT-AWESOME local installer

Font Awesome, and its Pro packages come with fonts for the local system. Thinking of creating an automatic installer function for packaging and deploying on the system.

Initial HMR Load

Due to the delay in the asynchronous tasks that proxy the hmr process with the CLI the initial load doesnt happen until you CTRL + R reload the initial time. After that HMR is hooked in and its business as usual.

There are no hooks in the CLI HMR ng serve -hmr process to subscribe to or listen for. Unlike the build process ng build the files are hosted from memory, so file events cant trigger the reload on the proxy.

I'm working on a clean solution that doesn't require moving away from the proxy solution.

Native modules

Hello,
I found a few problems with native module support. I've managed to get it all working but it's required a bit of work.

For my testing I cloned the repo (I'm on Windows), built and made sure everything ran OK, then attempted to add better-sqlite3
npm install better-sqlite3

First problem is that better-sqlite3 needs to be rebuilt against Electron node headers. So we need electron-builder
npm install --save-dev electron-builder

Now we need a way to force our native modules to be rebuilt. Taking what was done in repo: https://github.com/maximegris/angular-electron
I added a postinstall to package.json

"scripts": {
    "postinstall": "npm run postinstall:electron && npx electron-builder install-app-deps",
    "postinstall:electron": "node utils/cli-renderer",
    ....

then run npm install to force the rebuilding of the native module. From now on anytime a new package is installed the postinstall is automatically run and any native modules will get built against Electron.

At this point you should be able to use the native module but ONLY in the main process. If you attempt to require it in a renderer process (in an Angular service or Component) the module will not load with error

"MODULE_NOT_FOUND"
Error: Cannot find module 'better-sqlite3'

And the directories that are searched are:

"...installdir\electron-angular-ngrx\node_modules\electron\dist\resources\default_app.asar\node_modules"

"...installdir\electron-angular-ngrx\node_modules\electron\dist\resources\node_modules"

This took me the better part of a day to figure why this was happening... it's best summed up here:
electron-react-boilerplate/electron-react-boilerplate#374 (comment)

Basically if you start electron with a .js file that is NOT in the same directory as the package.json file things go astray wrt relative paths.

The 'fix' for now was to edit tsconfig.electron.json and change

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/electron",
    ...

to

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../",
    ...

and then change

"electron:serve": "wait-on http-get://localhost:4200/ & npm run electron:tsc && electron ./dist/electron/main.js",

to

"electron:serve": "wait-on http-get://localhost:4200/ & npm run electron:tsc && electron .",

Now the directories searched are:

"...installdir\electron-angular-ngrx\node_modules"
"...installdir\node_modules"
"...installdir\node_modules"
"...installdir\node_modules"
"D:\node_modules"

with the module being found under the first one.

Greg.