After setting up a new Angular project and installing Electron, I encountered an issue when trying to use ipcRenderer in an Angular component. The error message displayed is as follows (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)
Here are some of the version details:
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
The code snippet from my app.component.ts file, where I attempt to use 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 it's not recommended, I have also tried enabling nodeIntegration: true in my BrowserWindow configuration, but the error persists:
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
}
});
If I remove the ipcRenderer.send('open-dev-tools'); line, the error disappears.
The same error occurs when attempting to use remote instead of ipcRenderer/ipcMain.
I can confirm that __dirname logs correctly to the console from my main.js file as well.
Any assistance on this matter would be highly appreciated.