ThorstenHans / ngx-electron

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

Namespace 'Electron.CrossProcessExports' has no exported member 'Remote'. #71

Open Ch3shireDev opened 3 years ago

Ch3shireDev commented 3 years ago

(found on Windows).

How to reproduce:

ionic start example tabs --type=angular
cd example
npm i ngx-electron --save

After that I change src/app/app.module.ts from:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

to

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgxElectronModule } from 'ngx-electron';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, NgxElectronModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule { }

Then I spawn ionic build and I get the following error:

Error: node_modules/ngx-electron/lib/electron.service.d.ts:17:31 - error TS2694: Namespace 'Electron.CrossProcessExports' has no exported member 'Remote'.

17     readonly remote: Electron.Remote;
                                 ~~~~~~

My package.json file:

{
  "name": "example",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~12.1.1",
    "@angular/core": "~12.1.1",
    "@angular/forms": "~12.1.1",
    "@angular/platform-browser": "~12.1.1",
    "@angular/platform-browser-dynamic": "~12.1.1",
    "@angular/router": "~12.1.1",
    "@capacitor/app": "1.0.3",
    "@capacitor/core": "3.2.4",
    "@capacitor/haptics": "1.1.0",
    "@capacitor/keyboard": "1.1.0",
    "@capacitor/status-bar": "1.0.3",
    "@ionic/angular": "^5.5.2",
    "ngx-electron": "^2.2.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.1.1",
    "@angular-eslint/builder": "~12.0.0",
    "@angular-eslint/eslint-plugin": "~12.0.0",
    "@angular-eslint/eslint-plugin-template": "~12.0.0",
    "@angular-eslint/template-parser": "~12.0.0",
    "@angular/cli": "~12.1.1",
    "@angular/compiler": "~12.1.1",
    "@angular/compiler-cli": "~12.1.1",
    "@angular/language-service": "~12.0.1",
    "@capacitor/cli": "3.2.4",
    "@ionic/angular-toolkit": "^4.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "4.16.1",
    "@typescript-eslint/parser": "4.16.1",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "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",
    "typescript": "~4.2.4"
  },
  "description": "An Ionic project"
}
thenem commented 3 years ago

I also am seeing this same issue. Curious if anyone has a workaround?

argaman123 commented 2 years ago

Same here, even with a basic new Angular project (without IONIC) that has both Electron and ngx-electron installed

kyawswarthwin commented 2 years ago

same issue here

andelz commented 2 years ago

Looks like the remote module has been deprecated in Electron 12 and been removed in Electron 14 (https://www.electronjs.org/blog/electron-14-0#removed-remote-module). They moved the remote stuff into its own package (https://github.com/electron/remote/blob/main/README.md). So as a quick fix I would assume that downgrading to version 13 should do the trick. But of cource I would love to see this change reflected in ngx-electron.

steven-fernandez commented 2 years ago

Has this project been abandoned or is remote going to be updated?

WhiteLord commented 2 years ago

Has this project been abandoned or is remote going to be updated? It's been three months no and there is no movement in the issue. I'd call this abandonware...

jamiegrain commented 2 years ago

Had the same issue. Let's hope someone fixes this...

FreedomRings commented 2 years ago

I went into ./node_modules/ngx-electron/lib/electron.service.d.ts and comment out this line:

// readonly remote: Electron.Remote;

It compiled fine, and using axious for http, rest, google access and authentication all my remote issues were handled.

Note that if you update the module you will have to reload it, or do a branch of this and use that instead.

pedrohsouza20 commented 2 years ago

I went into ./node_modules/ngx-electron/lib/electron.service.d.ts and changed the type: readonly remote: any;

I guess that's not a good practice, but solved my problem.

FreedomRings commented 2 years ago

I went into ./node_modules/ngx-electron/lib/electron.service.d.ts and changed the type: readonly remote: any;

I guess that's not a good practice, but solved my problem.

Yup - that works too - but as you say neither of our solutions is best practice. Since this appears to not be maintained, the best practice for either of our solutions would probably be to fork the project to make the change so that we do not have to keep making the change over and over.

pedrohsouza20 commented 2 years ago

I went into ./node_modules/ngx-electron/lib/electron.service.d.ts and changed the type: readonly remote: any; I guess that's not a good practice, but solved my problem.

Yup - that works too - but as you say neither of our solutions is best practice. Since this appears to not be maintained, the best practice for either of our solutions would probably be to fork the project to make the change so that we do not have to keep making the change over and over.

Great answer! You got the point!

HiveTechDev commented 2 years ago

Note: I ran into this as well. looks like still not fixed with npx-electron.

one addition to helping others. when you make your local change, use the package: patch-package https://www.npmjs.com/package/patch-package

You can make the edit, store the edit in your local repo, then tie it into post-install so it applies the edit again for future npm installations/other machines on your project. see patch-package readme.

Again, unfortunate but, this at least saves you from editing it every time, or scripting it yourself.

creates folder patches, in it you find a file and can see your delta in there:

-    readonly remote: Electron.Remote;
+    readonly remote: any;

working well for me.

MurtathaLaith commented 2 years ago

I went into ./node_modules/ngx-electron/lib/electron.service.d.ts and comment out this line:

// readonly remote: Electron.Remote;

It compiled fine, and using axious for http, rest, google access and authentication all my remote issues were handled.

Note that if you update the module you will have to reload it, or do a branch of this and use that instead.

thank you <3 it worked for me