Cannot import Node, JS, or Electron library in Angular Typescript module no matter what I try

Question

I'm fairly new to stack overflow, so if I don't ask the question correctly feel free to help me out.

I've scoured every stack overflow and google article I can find and nothing works to import Electron, any other Node modules, or any native JS modules--I can only import and use Angular/typescript modules. I'm trying to import electron and use it in an angular app. I am also trying to use __dirname. For electron I've tried:

const { remote } = require('electron');
const { remote } = (<any>window)require('electron');
import { ipcRenderer, BrowserWindow, electron } from 'electron';
import * as remote from '@electron/remote'

For __dirname I've tried:

import * as fs from 'fs'; 
import { readFileSync } from 'fs';
import readFileSync from 'fs';

and for the implementation:

import.meta.url
process.cwd()
__dirname //worth a shot I guess

I've combined these options, and nothing works. I've run npm install --save-dev @types/node, and when that didn't work tried deleting the node_modules folder and ran npm install. "types": ["node"] has already been added to tsconfig.json's compilerOptions.

Here is one of my errors:

    Error: src/app/electron/electron.service.ts:3:20 - error TS2591: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node` and then add `node` to the types field in your tsconfig.

3 const { remote } = require('electron');
                     ~~~~~~~

I've already installed @types/node. It also almost always posts the following error. I have no clue what it's for, as it shows even when I'm not importing 'fs'.

Error: ./node_modules/electron/index.js
Module not found: Error: Can't resolve 'fs' in '/Users/user/Programming/Git/project/node_modules/electron'
resolve 'fs' in '/Users/user/Programming/Git/project/node_modules/electron'
  Parsed request is a module
  using description file: /Users/user/Programming/Git/project/node_modules/electron/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      looking for modules in /Users/user/Programming/Git/project
        using description file: /Users/user/Programming/Git/project/package.json (relative path: .)

Answer 1

What you want here is inter-process communication (IPC): https://www.electronjs.org/docs/latest/tutorial/ipc.

Electron does provide a way to use Electron and Node libraries from within an Angular app. It's just not as easy as importing a package.

It comes down to security. Node.js and Electron have capabilities that are normally unsafe in a browser environment. Electron keeps things secure by housing the browser window in an isolated process. So there are two isolated processes in an Electron app: a renderer process that displays your Angular app, and Electron's main process which can execute Electron and Node.js APIs.¹ You can't import those packages in the renderer process because they're only available in the main process.

With IPC, you expose a specific subset of Electron and Node functionality to your Angular app through the window object. IPC is almost like a client-server model: you define functions to expose to the renderer process through the window object, and write handlers for those functions in Electron's main.js file. You can use Electron and Node.js libraries within your main.js file. The fs and electron imports will work there (I swear, I'm personally using them). For example, if you want to read a file, you can write a handler that takes the file path as an argument returns the file's contents.

There are tutorials for Electron IPC on YouTube that should be helpful. It takes some time to wrap your head around.

Answer 2

Your browser cannot run modules written in C++ like fs and electron. Node.js can do it because node developers specifically created node to be able to load binary modules (written in C++). Browsers can only run javascript modules.

As such builders such as Webpack ignore these modules simply because it does not make sense to include them.

You cannot use fs and electron in your Angular app. You can however use Angular in your electron app (because electron was created to run javascript code and Angular compiles to pure javascript code).

Trying to use fs or electron in Angular is a little bit like trying to import Internet Explorer or Adobe Photoshop in Angular.