I'm looking to load a locally saved video file via electron and play it in my angular component. For this, I have the loadLocalFile function that I expose in order to avoid setting nodeIntegration to true. I still get this Security Warning :

This renderer process has either no Content Security Policy set or a policy with "unsafe-eval" enabled. This exposes users of this app to unnecessary security risks.

I do not have a renderer.js file as I'm using Angular. How am I meant to access my electronAPI in my Angular?

My Preload.js contains the following, which I want to call from my Angular component:

contextBridge.exposeInMainWorld("electronAPI", {
  loadLocalFile: (event, filePath) => {
    if (filePath === undefined) {
      console.log("No file selected");
      return;
    }

    dialog.showOpenDialog((filePath) => {
      // fileNames is an array that contains all the selected
      if (filePath === undefined) {
        console.log("No file selected");
        return;
      }

      fs.readFile(filePath, "utf-8", (err, data) => {
        if (err) {
          alert("An error ocurred reading the file :" + err.message);
          return;
        }

        // Change how to handle the file content
        console.log("The file content is : " + data);
      });
    });
  },
});

My app.module.ts conains the following:

export interface IElectronAPI {
  loadLocalFile: (event: Event | null, path: string) => Promise<void>;
}

declare global {
  interface Window {
    electronAPI: IElectronAPI;
  }
}

in my Angular Component I access the Api with:

window.electronAPI.loadLocalFile(null, "/path/to/my/video");

How are you meant to implement the electron API access from your Angular component? A service would probably work well, but I couldn't find or come up with a working example that isn't broken by the removal of certain imports