Cannot import any module from @types/node

Question

I am developing an Electron app with angular and I want to get some information about my pc and execute some commands. I am trying to use the os and child_process modules but so far I cannot import them. This is my component:

import { Component, OnInit } from '@angular/core';
import * as exec  from 'child_process';

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

  constructor() { }

  ngOnInit(): void {
    
    console.log()
  }

}

I triend many different ways of importing and I always get the same error:

Error: src/app/components/home/home.component.ts:2:24 - error TS2307: Cannot find module 'child_process' or its corresponding type declarations.

I have installed types:

npm install --save  @types/node

This is my package.json:

{
    "name": "configurator-web",
    "version": "0.0.0",
    "main": "main.js",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "start:electron": "ng build --base-href ./ && electron ."
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "~11.2.10",
        "@angular/common": "~11.2.10",
        "@angular/compiler": "~11.2.10",
        "@angular/core": "~11.2.10",
        "@angular/forms": "~11.2.10",
        "@angular/platform-browser": "~11.2.10",
        "@angular/platform-browser-dynamic": "~11.2.10",
        "@angular/router": "~11.2.10",
        "@fortawesome/fontawesome-free": "^5.15.3",
        "chai": "^4.3.4",
        "rxjs": "~6.6.0",
        "tslib": "^2.0.0",
        "zone.js": "~0.11.3"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "~0.1102.9",
        "@angular/cli": "~11.2.9",
        "@angular/compiler-cli": "~11.2.10",
        "@types/jasmine": "~3.6.0",
        "@types/node": "^12.11.1",
        "codelyzer": "^6.0.0",
        "electron": "^12.0.7",
        "jasmine-core": "~3.6.0",
        "jasmine-spec-reporter": "~5.0.0",
        "karma": "~6.1.0",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage": "~2.0.3",
        "karma-jasmine": "~4.0.0",
        "karma-jasmine-html-reporter": "^1.5.0",
        "mocha": "^8.4.0",
        "protractor": "~7.0.0",
        "spectron": "^14.0.0",
        "ts-node": "~8.3.0",
        "tslint": "~6.1.0",
        "typescript": "~4.1.5"
    }
}

So far I tried with os and child_process and I get exactly the same error for both of them. I checked and the folders and the .ts files exist under node_modules as they are installed.

Any help will be appreciated. I do not know what else to do.

Thanks!

It's a module on the server (node.js), not on the client (user's browser). You cannot spawn processes from the user's browser. In your case Electron is the browser _and_ the server, but there it's internally separated as well. — CherryDT, Jul 19 '21 at 12:09
See https://www.electronjs.org/docs/tutorial/quick-start#access-nodejs-from-the-renderer-with-a-preload-script for how to do it — CherryDT, Jul 19 '21 at 12:11
See also: [How to use preload.js properly in Electron](https://stackoverflow.com/questions/57807459/how-to-use-preload-js-properly-in-electron) — CherryDT, Jul 19 '21 at 12:17
Can you please share me the tsconfig.json file's code snipped? — Abhishek Priyadarshi, Jul 19 '21 at 13:43

score 0 · Answer 1 · answered Jul 19 '21 at 12:02

0

whenever installing @types/node you need to mention below code to your tsconfig.json file:

{
  "compilerOptions": {
    ...
    "typeRoots": ["node_modules/@types"]
  }
}

answered Jul 19 '21 at 12:02

MaThar Beevi

294
1
2
10

score 0 · Answer 2 · answered Jul 20 '21 at 10:18

I found a quick workaround that works for Electron using angular. Just add this to your main.js file:

webPreferences: {
    nodeIntegration: true,
    contextIsolation: false,
    enableRemoteModule: true,
}

Then on your index.html add this script (change 'os' for the library that you want to use):

<body>
    <script>
        let os = require('os')
        window.os = os;
    </script>
    <app-root></app-root>

</body>

This basically sets a global variable with the library to use so you can import it anywhere within your app.

And finally use it anywhere you want on any component:

ngOnInit(): void {
    let os = window['os']
    console.log(os.hostname)
  }

For sure you need to test it running electron, running angular will show nothing!

I know this is just a workaround. But having investigated so much, I think it is a very simple solution if you just need a couple features of these libraries.

Cannot import any module from @types/node

2 Answers2