Can't resolve 'fs'

With Angular 9 I get the following error:

ERROR in ../node_modules/electron/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\feren\Projects\[projectname]\node_modules\electron'
ERROR in ../node_modules/electron-log/src/transports/file/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\feren\Projects\[projectname]\node_modules\electron-log\src\transports\file'
ERROR in ../node_modules/electron-log/src/transports/file/file.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\feren\Projects\[projectname]\node_modules\electron-log\src\transports\file'
ERROR in ../node_modules/electron-log/src/transports/file/packageJson.js
Module not found: Error: Can't resolve 'fs' in 'C:\Users\feren\Projects\[projectname]\node_modules\electron-log\src\transports\file'

relevant part of app.module.ts:

import * as log from 'electron-log';

log.transports.file.level = false;
log.transports.ipc.level = 'info';
console.log = log.log;

[bno1]

I found a solution, follow this guide: https://developer.okta.com/blog/2019/12/09/angular-webpack (just the Set Up Angular With Webpack section), and in your custom-webpack.config.js set the target to electron-renderer, like so:

module.exports = {
    target: 'electron-renderer',
};

[greg9504]

If you get the "Error: Can’t resolve ‘fs’ in … " in your Angular application after adding Electron-log try this:

In the renderer (a component) use code like this (note the window.require):

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import log from 'electron-log';  //<--

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

  private elog: typeof log; //<--

  constructor(
    private electronService: ElectronService,
    private translate: TranslateService
  ) {
    this.translate.setDefaultLang('en');
    
    this.elog = window.require('electron-log');  //<--
    this.elog.info('Hello, log'); // use it

  }
}

If using the maximegris/angular-electron starter you would probably want to put the instance of log in the ElectronService and access it through that, so you don’t have to write the window.require everywhere.

More info https://github.com/maximegris/angular-electron/issues/632#issuecomment-898484389 and https://github.com/maximegris/angular-electron#how-to-import-3rd-party-libraries

In main process just instantiate it normally and make sure to set nodeIntegration: true, and contextIsolation: false if you want to use Electron-log in renderer process.

/app/main.ts

import { app, BrowserWindow, screen } from 'electron';
import log from 'electron-log';

log.info('In main process');

....

win = new BrowserWindow({
    x: 0,
    y: 0,
    width: size.width,
    height: size.height,
    webPreferences: {
      nodeIntegration: true,
      allowRunningInsecureContent: (serve) ? true : false,
      contextIsolation: false,  
    },
  });