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

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.