无法从 @types/node 导入任何模块答案

【问题标题】：Cannot import any module from @types/node无法从 @types/node 导入任何模块
【发布时间】：2021-09-27 01:59:04
【问题描述】：

我正在开发一个带角度的 Electron 应用程序，我想获取一些关于我的电脑的信息并执行一些命令。我正在尝试使用 os 和 child_process 模块，但到目前为止我无法导入它们。这是我的组件：

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()
  }

}

我尝试了许多不同的导入方式，但总是遇到同样的错误：

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

我已经安装了类型：

npm install --save  @types/node

这是我的 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"
    }
}

到目前为止，我尝试使用 os 和 child_process 并得到完全相同的错误。我检查了，文件夹和 .ts 文件在安装时存在于 node_modules 下。

任何帮助将不胜感激。我不知道还能做什么。

谢谢！

【问题讨论】：

浏览器模式下无法访问节点模块...
它是服务器（node.js）上的一个模块，而不是客户端（用户的浏览器）上的一个模块。您不能从用户的浏览器生成进程。在您的情况下，Electron 是浏览器和服务器，但它在内部也是分开的。
查看electronjs.org/docs/tutorial/…了解如何操作
另见：How to use preload.js properly in Electron
你能分享一下tsconfig.json文件的代码吗？

标签： node.js angular npm electron

【解决方案1】：

每当安装 @types/node 时，您需要在 tsconfig.json 文件中提及以下代码：

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

【讨论】：

【解决方案2】：

我找到了一个适用于使用 Angular 的 Electron 的快速解决方法。只需将其添加到您的 main.js 文件中即可：

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

然后在您的index.html 上添加此脚本（为您要使用的库更改“os”）：

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

</body>

这基本上为要使用的库设置了一个全局变量，以便您可以在应用程序的任何位置导入它。

最后在任何组件上使用它：

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

当然你需要测试它运行电子，运行角度不会显示任何东西！

我知道这只是一种解决方法。但是经过这么多调查，如果您只需要这些库的几个功能，我认为这是一个非常简单的解决方案。

【讨论】：