ngx-electron-slim

ngx-electron-slim is a fork of a great module created by Thorsten Hans located here: https://github.com/ThorstenHans/ngx-electron, however in his releases there is a bug that is causing the entire electron package to bundled into a built apps node-modules directory when using electron-packager or similar building tools. The fix looks to be pulled into the original project, however there has yet to be a release and it seems the pull took some time. I created this fork to have a module that can be installed easily in the meantime.

What does it do?

This module provides an angular wrapper for Electron's APIs exposed as part of the renderer process.

Installation

New Projects

ngx-electron-slim can be installed easily using either yarn or npm commands in the scope of an angular project.

$ yarn add ngx-electron-slim

# OR

$ npm install ngx-electron-slim

Existing Projects with ngx-electron

ngx-electron-slim can be used as a drop in replacement for ngx-electron, just remove ngx-electron via:

$ yarn remove ngx-electron
# OR  
$ npm unistall ngx-electron

Then install ngx-electron-slim via the above section and change all your imports from ngx-electron to ngx-electron-slim.

How do I use it?

ngx-electron-slim is exposing a module called NgxElectronModule which needs to be added into your AppModule under imports.

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {NgxElectronModule} from 'ngx-electron';
import {AppComponent} from './app.component';
 
@NgModule({
    declarations: [],
    imports: [
      BrowserModule,
      NgxElectronModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
 
}

Once the module has been added, you can easily use Dependency Injection to ask for ElectronService.

import {Component} from '@angular/core';
import {ElectronService} from 'ngx-electron-slim';
 
@Component({
  selector: 'my-app',
  templateUrl: 'app.html'
})
export class AppComponent {
 
    constructor(private myElectronService: ElectronService) { }
    
    public logArchitecture() {
        if(this.myElectronService.isElectronApp) {
            console.log(this.myElectronService.process.arch);
        }
    }
}

The ElectronService

The ElectronService is exposing all API's accessible from within Electron's renderer process. If your app is not inside electron, all getters will return NULL instead.

Properties

• desktopCapturer: Electron.DesktopCapturer - Electron's desktop capturing API
• ipcRenderer: Electron.IpcRenderer - Electron IpcRenderer
• remote: Electron.Remote - Electron Remote capabilities
• webFrame: Electron.WebFrame - Electron WebFrame
• clipboard: Electron.Clipboard - Clipboard API
• crashReporter: Electron.CrashReporter - Electron's CrashReporter
• process: NodeJS.Process - Electron's Process Object
• screen: Electron.Screen - Electron's Screen API
• shell: Electron.Shell - Electron's Shell API
• nativeImage: Electron.NativeImage - Electron's NativeImage API
• isElectronApp: boolean - Indicates if app is being executed inside of electron or not

Credits

The project is completely a work of Thorsten Hans (https://github.com/ThorstenHans), I did not create this, this project only exists to bridge the gap in time until another full release of the original ngx-electron project is produced