ThorstenHans / ngx-electron

A simple Angular wrapper for electron's Renderer API
MIT License
429 stars 86 forks source link

isElectronApp is true but remote is null #52

Open StationedInTheField opened 4 years ago

StationedInTheField commented 4 years ago

I tried the workarounds here: https://github.com/ThorstenHans/ngx-electron/issues/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 commented 4 years ago

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

calico-crusade commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

billygerhard commented 4 years ago

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 commented 4 years ago

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

billygerhard commented 4 years ago

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

StationedInTheField commented 4 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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

CatbirdBasil commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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