Import function only (not entire file stack) into Angular from vanilla JavaScript

The Challenge

I am working on an Electron/Angular app that will display an emergency message to multiple computers in the event of a tornado or other incident. To accomplish this, I am using a WebSocket protocol (Signral R) on the backend to send the alert, which then triggers Electron’s main.js (running in the background) to launch a window on any devices running the app.

The arrival of the message triggers the window to launch, but I also need to use the message in the Angular part of the app (which does not initialize until after the window is open) to indicate the nature of the emergency. To avoid timing problems, I planned to import a function into my app.component.ts that would be called at ngOnInit to retrieve an emergency variable from main.js.

The Problem

Angular does not like the import from raw JavaScript. Intuitively you would think Angular would only import the exported class. However it appears to try and import Electron as well (generating a conflict with ‘fs’ and ‘path’ that is explained here), generating the following error message:

./node_modules/electron/index.js:1:11-24 - Error: Module not found: Error: Can't resolve 'fs' in 'C:Usersmeelectron-appnode_moduleselectron'

./node_modules/electron/index.js:3:13-28 - Error: Module not found: Error: Can't resolve 'path' in 'C:Usersmeelectron-appnode_moduleselectron'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

In spite of doing considerable research, I have not found anything approaching a solution. Any ideas for only importing the information I want would be much appreciated. Here are my files:

main.js (simplified somewhat)

const signalR = require("@microsoft/signalr")
const { app, shell, BrowserWindow, Menu, nativeImage, Tray } = require('electron')
const path = require("path");
const url = require("url");

//various setup logic goes here
//...

webSocketConnection.on("EmergencyActivation", (jsonData) => {
    createElectronWindow();
    const emergencyMessage = jsonData
});

module.exports = class Emergency {
    getEmergency() {
        return emergencyMessage
    }
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import  { Emergency } from './../../main';


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

  constructor(private emergency: Emergency) {}

  ngOnInit() {
    console.log(this.emergency.getEmergency())
  }
}