kaffiend / electron-angular-ngrx Goto Github PK

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?

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

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.

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.

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.

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

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'