Using IPC renderer in angular component

Question

Im currently in the process of create an electron application using angular and hit a bit of a road block.

The whole idea is that the user uses the electron app to input a "Name" and an "Event" and I use playwright to emulate the browser initiating going to a webpage and getting all the name data for that event

At the moment I have a form that takes a first name and event

Name.component.html

<form (ngSubmit)="submitForm()" #nameForm>
  <label for="firstName">First Name:</label>
  <input type="text" id="firstName" name="firstName" [(ngModel)]="firstName"><br><br>
  <label for="event">Event:</label>
  <input type="text" id="event" name="event" [(ngModel)]="event"><br><br>
  <button type="submit">Submit</button>
</form>

name.component.ts

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

@Component({
  selector: 'app-name',
  templateUrl: './name.component.html',
  styleUrl: './name.component.css'
})

export class nameComponent {

  barcode: string = '';
  event: string = '';

  submitForm() {
    const name = this.name;
    const event = this.event;
    
    console.log('Barcode:', this.name);
    console.log('Event:', this.event);

    
    ipcRenderer.send('checkName', { name, event });
  }


}

this is what I have going on in main.js

Main.js

// main.js

// Modules to control application life and create native browser window
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('node:path')
const url = require("url");
const { chromium } = require('playwright');

const createWindow = () => {
    // Create the browser window.
    const mainWindow = new BrowserWindow({
        width: 1000,
        height: 800,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            nodeIntegration: true,
            contextIsolation: false
        }
    })

    // and load the index.html of the app.
    mainWindow.loadURL(
        url.format({
          pathname: path.join(__dirname, '/dist/eventName/browser/index.html'),
          protocol: "file:",
          slashes: true
        })
      );

    // Open the DevTools.
    // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
    createWindow()

    app.on('activate', () => {
        // On macOS it's common to re-create a window in the app when the
        // dock icon is clicked and there are no other windows open.
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})
// Listen for the 'checkNames' event from the renderer process
ipcMain.on('checkNames', async (event, data) => {
    console.log('Barcode:', data.Name);
    console.log('Event:', data.event);
    try {
        const result = await getNameData(data.Name, data.event, true, true);
        console.log(result);

    } catch (error) {
        console.error('Error fetching Name data:', error);

    }
});

preload.js

// preload.js

const { ipcRenderer } = require('electron');

window.ipcRenderer = ipcRenderer;
window.ipcMain = ipcRenderer;

// All the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
        const element = document.getElementById(selector)
        if (element) element.innerText = text
    }

    for (const dependency of ['chrome', 'node', 'electron']) {
        replaceText(`${dependency}-version`, process.versions[dependency])
    }
})

The issue im having now is that when I compile using npm start

 [ERROR] Could not resolve "fs"

    node_modules/electron/index.js:1:19:
      1 │ const fs = require('fs');
        ╵                    ~~~~

  The package "fs" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.


X [ERROR] Could not resolve "path"

    node_modules/electron/index.js:2:21:
      2 │ const path = require('path');
        ╵                      ~~~~~~

  The package "path" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

Any ideas what what I can do to resolve the issue? It compiles successfully when I have the renderer being called in a separate renderer.js file but the issues lies when I'm calling it from the component directly. I'm just not sure how to call the renderer.js from within the component itself, that is why I tried using it from the component directly.