ngx-electron icon indicating copy to clipboard operation
ngx-electron copied to clipboard

Not compatible with Angular Ivy

Open panyann opened this issue 1 year ago • 3 comments

Hey, I think it doesn't work at all at the moment. Angular 16.1.

image

I have no idea how to use fs or path in the Angular with Electron now...

panyann avatar Jul 10 '23 12:07 panyann

Hey @panyann did you find any resolution?

kulkarni-sachin avatar Jul 18 '23 18:07 kulkarni-sachin

@kulkarni-sachin Yes, every day learning more... Week ago I was as lost as you. I'm manually using Electron's IPC.

How does it work? Angular can't use 'fs' or other Node.js modules, but Electron can. That means that in main.js (main electron file) you have access to everything, you just need to send data to that file and use it there.

How to send the data? You must use IPC to send and receive events between Angular and Electron. Then you can do whatever you want in the main.js.

You can read how it works here: https://dev.to/michaeljota/integrating-an-angular-cli-application-with-electron---the-ipc-4m18

I additionally use electron-store to save data to json file on disk (still in the main.js). That's why I don't need to use 'fs' directly (I'm lazy when I can).

You can use my service, which I made based on above tutorial:

import { Injectable } from '@angular/core';
import { IpcRenderer } from 'electron';


@Injectable({
  providedIn: 'root'
})
export class IpcService {

  private ipc: IpcRenderer;
  
  constructor() {
    if (window.require) {
      try {
        this.ipc = window.require('electron').ipcRenderer;
      } catch (e) {
        throw e;
      }
    } else {
      console.warn('Electron\'s IPC was not loaded');
    }
  }

  public on(channel: string, listener: any): void {
    if (!this.ipc) {
      return;
    }
    this.ipc.on(channel, listener);
  }

  public send(channel: string, data?: any): void {
    if (!this.ipc) {
      return;
    }
    this.ipc.send(channel, data);
  }

}

panyann avatar Jul 18 '23 18:07 panyann

Hi,

I forked the project in order to rebuild it with angular-cli 16.2. Fell free to test it here on npmjs Sorry in advance if you have issues, it's still in beta.

Requirements :

  • angular >= 16
  • electron >= 13 Installation :
  • npm uninstall ngx-electron
  • npm i ad-ngx-electron

You will have to adapt your import 'ngx-electron' to 'ad-ngx-electron'.

Hope it helps :-)

adessilly avatar Sep 21 '23 12:09 adessilly