Angular & Electron: ipcRenderer - __dirname is not defined

Question

I have set up a new Angular project and installed electron. When I try to use ipcRenderer in an angular component, I get the error shown below (ReferenceError).

    Uncaught ReferenceError: __dirname is not defined
     at Object.vbkW (index.js:4)
     at __webpack_require__ (bootstrap:79)
     at Module.Sy1n (app.component.ts:2)
     at __webpack_require__ (bootstrap:79)
     at Module.ZAI4 (app.module.ts:2)
     at __webpack_require__ (bootstrap:79)
     at Module.zUnb (app-routing.module.ts:8)
     at __webpack_require__ (bootstrap:79)
     at Object.0 (main.js:10)
     at __webpack_require__ (bootstrap:79)

Some version info:

    Angular CLI: 11.2.14
    Node: 14.16.0
    @angular-devkit/architect       0.1102.14
    @angular-devkit/build-angular   0.1102.14
    @angular-devkit/core            11.2.14
    @angular-devkit/schematics      11.2.14
    @schematics/angular             11.2.14
    @schematics/update              0.1102.14
    rxjs                            6.6.7
    typescript                      4.1.5

This is my app.component.ts code, just using ipcRenderer.send():

import { Component } from '@angular/core';
import { ipcRenderer } from 'electron';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'portals-new-two';

  tempButton(): void {
    console.log('pressed!');
    ipcRenderer.send('open-dev-tools');
  }

}

Although not advised, I have tried setting nodeIntegration: true in my BroswerWindow but still get the error:

win = new BrowserWindow({ 
 width: 800,
 height: 600,
 webPreferences: {
  nodeIntegration: true,
 }
});

If I remove the ipcRenderer.send('open-dev-tools'); line the error goes away.

I also get the same error when trying to use remote rather than ipcRenderer/ipcMain.

__dirname logs to the console fine from my main.js file also.

Any help would be much appreciated.

Does this answer your question? [How to import ipcRenderer in vue.js ? \_\_dirname is not defined](https://stackoverflow.com/questions/63615355/how-to-import-ipcrenderer-in-vue-js-dirname-is-not-defined) — rafalimaz, Sep 03 '21 at 18:38

score 0 · Accepted Answer · answered Jul 02 '21 at 09:18

Ok, I didn't find the reason why this is happening, but I got around it using a great Angular/Electron starter project here:

https://github.com/maximegris/angular-electron

This makes use of an Angular Service to hook into all of the electron stuff and seems to work well.

Angular & Electron: ipcRenderer - __dirname is not defined

1 Answers1