Angular（5）-Electron Serialport支持

Question

在过去，我在NodeJS + TypeScript中使用SerialPort本机模块编写了一些应用程序，以便通过RS232与不同的硬件系统进行通信。

现在我想将serialport添加到我的Angular-Electron应用程序中。所以我安装了以下内容：

npm install serialport --save
npm install @types/serialport --save

我把import * as SerialPort from 'serialport'放在home.components.ts。

在调用下面的代码后，只有错误：

//List serial ports
SerialPort.list( (err:Error, ports:any[]) => {
    ports.forEach((port:any) => {
        console.log('Com Name ' +port.comName +
                    ' | Manufac ' +port.manufacturer +
                    ' | Vendor ID '+ port.vendorId );
    });
});

//open com port 4
this.com = new SerialPort('COM4', {baudRate : 19200}, (err: Error) => {
    if (err) {
        console.log('Open Error: ', err.message);
    }
});

浏览器DevTool日志：

getRoot     @   vendor.bundle.js:87243
bindings    @   vendor.bundle.js:87139
./node_modules/serialport/lib/bindings/linux.js     @   vendor.bundle.js:109113
webpack_require     @   inline.bundle.js:55
(anonymous)     @   vendor.bundle.js:108666
./node_modules/serialport/lib/bindings/auto-detect.js   @   vendor.bundle.js:108669
webpack_require     @   inline.bundle.js:55
./node_modules/serialport/lib/index.js  @   vendor.bundle.js:109589
webpack_require     @   inline.bundle.js:55
(anonymous)     @   main.bundle.js:268
./src/app/components/home/home.component.ts     @   main.bundle.js:348
webpack_require     @   inline.bundle.js:55
./src/app/app-routing.module.ts     @   main.bundle.js:38
webpack_require     @   inline.bundle.js:55
./src/app/app.module.ts     @   main.bundle.js:164
webpack_require     @   inline.bundle.js:55
./src/main.ts   @   main.bundle.js:418
webpack_require     @   inline.bundle.js:55
0   @   main.bundle.js:507
webpack_require     @   inline.bundle.js:55
webpackJsonpCallback    @   inline.bundle.js:26
(anonymous)     @   main.bundle.js:1

任何暗示如何让它运行？我的Angular-Electron应用程序需要串口支持。在Python或C中没有问题。

任何帮助表示赞赏。

Answer 1

如果你去https://github.com/maximegris/angular-electron，你可以在页面底部看到如何使用本机库。

在electron.service.ts中添加导入：

import * as SerialPort from 'serialport';

然后在ElectronService类里面添加：

serialPort: typeof SerialPort;

然后在构造函数中添加if语句：

if(this.isElectron()){
   [...]
   this.serialPort = window.require('serialport');
}

回到home.components.ts文件中添加导入

import {ElectronService} from '../../providers/electron.service';

将服务注入构造函数：

constructor(private electron:ElectronService){...}

最后，在ngOnInit（）函数中，你可以像这样使用串口：

this.electron.serialPort.list().then((ports:any)=>{
   [...]
}).catch((err:any)=>{
   [...]
});

Answer 2

角电子种子也将npm模块安装在/ dist文件夹中，因此您还需要在dist文件夹中的serialport模块上运行电子重建以使其工作。

正如角电子种子中所描述的那样。

如果需要使用NodeJS本机库，必须手动将其添加到根文件夹中的webpack.config.js文件中

module.exports = {
  "externals": {
    "serialport": "require('serialport')"
   }
}

在package.json中添加：

"scripts": {
    "postinstall": "electron-rebuild -f -w serialport"
}

然后跑

npm start