isElectronApp is true but remote is null

[StationedInTheField]

I tried the workarounds here: #32

With:

  win = new BrowserWindow({ width: 950, height: 555, backgroundColor: "#ffffff",
    acceptFirstMouse: true,
    webPreferences: {
      nodeIntegration: true,
      nodeIntegrationInWorker: true,
      backgroundThrottling: false
    }
  });

Somehow nodeIntegration: true seems to go ignored for me, I'm trying to use the remote module to require fs but remote keeps coming back as null. Spent all day trying all different kinds of workarounds, but nothing worked. I have "@angular-builders/custom-webpack": "^9.2.0" and "electron-builder": "^22.7.0":

const webpack = require('webpack')

module.exports = {
  node: {
      crypto: false,
      path: true,
      os: true,
      stream: true,
      buffer: false
  },
  plugins: [
         new webpack.DefinePlugin({
             'process.env.NODE_ENV': JSON.stringify('production')
         })
     ]

}

I also tried adding:

  target: "node-webkit",

It compiles and packages the app but throws require is not defined before the app gets loaded, I guess this only worked in an older version of webpack.

angular.json has:
"builder": "@angular-builders/custom-webpack:browser",

If I try to require('electron').remote or window.require('electron').remote in the console after the unmodified app has loaded (no ngx-electron inside), then I just get require is not defined as well.

[StationedInTheField]

Okay never mind, I fixed it. Not entirely sure how but I had to downgrade my node typings to 12.0.12.

[calico-crusade]

It seems that ElectronService.remote is null consistently in electron 10+.
I had to downgrade electron from 10.1.0 to 9.2.1 to get it to work.

import { Component } from '@angular/core';
import { ElectronService } from 'ngx-electron';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.scss' ]
})
export class AppComponent {
    get window() {
        return this.electron.remote.getCurrentWindow();
    }

    constructor(private electron: ElectronService) { }

    close() { this.window.close(); }
}

Any reference to this.window errors with a null reference on getCurrentWindow() because remote is null.

[StationedInTheField]

Try:

webPreferences: {
      nodeIntegration: true,
      nodeIntegrationInWorker: true,
      backgroundThrottling: false,
      enableRemoteModule: true
    }

Among other things that's one thing I changed, you can also keep your eyes on https://github.com/QuestNetwork/quest-messenger-js - I still have a little libp2p pubsub issue (ipfs/js-ipfs issues/3249), but once that's solved and the demo works, I'll commit it and it has remote working now (using it to require 'fs' so that I can store config, message history, etc)

[billygerhard]

I am having undefined issues all over the place with Electron 10.0.0 also.

[billygerhard]

I found a solution. In 10+ enableRemoteModule is set to false by default. In your mainWindow constructor, add it to your web preferences

webPreferences: {
      enableRemoteModule: true,
}

[StationedInTheField]

So the last thing I told people to try probably did the trick. Thanks for the info @billygerhard !

[billygerhard]

Sometimes it helps to read the release notes! Breaking changes always seem to break stuff!

[StationedInTheField]

That's where I got it. Would be great if these things found their way into the readme since a number of people keep running into the same issue =)

[Bug-Reaper]

Try:

webPreferences: {
      nodeIntegration: true,
      nodeIntegrationInWorker: true,
      backgroundThrottling: false,
      enableRemoteModule: true
    }

Among other things that's one thing I changed, you can also keep your eyes on https://github.com/QuestNetwork/quest-messenger-js - I still have a little libp2p pubsub issue (ipfs/js-ipfs issues/3249), but once that's solved and the demo works, I'll commit it and it has remote working now (using it to require 'fs' so that I can store config, message history, etc)

This worked for me, thank you. :) electron 10.0.0

[eddyizm]

What version of angular are you guys on? I'm having a hell of time connecting to anything electron and was hoping this library would help. Now I get the same thing where the it's going in the block because it's true but the sendSync bombs and is NULL

    if (this._electronService.isElectronApp) {
      let pong: string = this._electronService.ipcRenderer.sendSync('ping');
      console.log(pong);
  }

Do I need to downgrade to electron 10.* ? Even adding the web preferences didn't fix it.

EDIT: Currently on "electron": "^12.0.1",

[Jay031]

What version of angular are you guys on? I'm having a hell of time connecting to anything electron and was hoping this library would help. Now I get the same thing where the it's going in the block because it's true but the sendSync bombs and is NULL

    if (this._electronService.isElectronApp) {
      let pong: string = this._electronService.ipcRenderer.sendSync('ping');
      console.log(pong);
  }

Do I need to downgrade to electron 10.* ? Even adding the web preferences didn't fix it.

EDIT: Currently on "electron": "^12.0.1",

I have exactly the same problem with Electron 12.0.1 and ngx-electron 2.2.0
ipcRenderer stays null. So my send / on functions are all broken!

[billygerhard]

Its because of the new security options they add as electron gets updated more, my current webPreferences for my main window I know you need on electron 12 are

webPreferences: {
      enableRemoteModule: true,
      contextIsolation: false,
}

[eddyizm]

@billygerhard That totally worked! It looks like I was missing the contextIsolation: false
I was ready to pack my bags and use another boiler plate template even when I really didn't want to. Thanks a bunch!

@Jay031 see above.

[Jay031]

Love the quick replies, thanks guys!
I also missed the contextIsolation: false

[CatbirdBasil]

Have struggled with that error for few days too.
In case you can't/don't want to disable contextIsolation here is guide on how to use preload.js nicely.

Basically you can get same behavior and expose only those things you really want to

[venomoustoad]

So I have tried this with electron v12 - I need to do 3 things:
nodeIntegration: true, enableRemoteModule: true, contextIsolation: false
As a consequence I am able to access electronService.remote.fs etc etc.
however, when i set contextIsolations as false, it breaks my giving other errors in the angular code:
ReferenceError: $ is not defined
My jquery etc, which was normally preloaded earlier does not load any more. Why is this happening

[luisalejandrofigueredo]

With this package.json run find but if try update electron to latest version and not compile.
may be the package is too old.

{
"name": "generator",
"productName": "Nestjs Generator",
"version": "0.0.28",
"author": "Luis Alejandro Figueredo Casadei",
"description": "Generator for Nestjs",
"main": "main.js",
"icon": "dist/generador/assets/icons/win/icon.ico",
"build": {
"appId": "generador",
"files": [
"dist/generador//*",
"node_modules//*",
"package.json",
"main.js"
],
"win": {
"icon": "dist/generador/assets/icons/win/icon.ico",
"target": [
"msi",
"nsis"
]
}
},
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"start:electron": "ng build --base-href ./ && electron . ",
"start:electronserv": "ng build --base-href ./ && electron . --serve",
"pack": "electron-builder --dir",
"dist": "electron-builder"
},
"private": true,
"dependencies": {
"@angular/animations": "~12.2.3",
"@angular/cdk": "^12.2.3",
"@angular/common": "~12.2.3",
"@angular/compiler": "~12.2.3",
"@angular/core": "~12.2.3",
"@angular/flex-layout": "^12.0.0-beta.34",
"@angular/forms": "~12.2.3",
"@angular/material": "^12.2.3",
"@angular/platform-browser": "~12.2.3",
"@angular/platform-browser-dynamic": "~12.2.3",
"@angular/router": "~12.2.3",
"@nestjs/cli": "^7.6.0",
"electron-builder-squirrel-windows": "^22.10.5",
"electron-reload": "^1.5.0",
"ngx-electron": "^2.2.0",
"prettier": "^2.3.2",
"rxjs": "~6.5.4",
"tslib": "^2.0.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.2.3",
"@angular/cli": "~12.2.3",
"@angular/compiler-cli": "~12.2.3",
"@angular/language-service": "~12.2.3",
"@types/electron": "^1.6.10",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"electron": "^8.2.2",
"electron-builder": "^22.10.5",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.4",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "^4.2.3"
}
}

[TheColorRed]

Remote has been deprecated v12 and removed in v14: https://www.electronjs.org/docs/latest/breaking-changes#removed-remote-module