Angular(5)-电子串行端口支持 [英] Angular(5)-Electron Serialport Support

问题描述

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

In the past I wrote some applications in NodeJS+TypeScript with SerialPort native module to communicate over RS232 with different hardware systems.

现在，我想将串行端口添加到我的Angular-Electron应用程序中. 因此，我安装了以下内容:

Now I would like to add serialport to my Angular-Electron app. So I installed the following:

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

我在home.components.ts中放置了import * as SerialPort from 'serialport'.

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

After invoking the code below nothing but errors:

//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日志:

Browser DevTool Log:

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

任何提示如何使其运行?我的Angluar-Electron应用程序中需要SerialPort支持. 在Python或C语言中没问题.

Any hint how to get it running? I need SerialPort support in my Angluar-Electron application. In Python or C that's no problem.

感谢您的帮助.

推荐答案

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

If you go to https://github.com/maximegris/angular-electron you can see how to use native libraries at the bottom the page.

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

In electron.service.ts add the import:

import * as SerialPort from 'serialport';

然后在ElectronService类中添加:

Then inside the ElectronService class add:

serialPort: typeof SerialPort;

然后在构造函数中向if语句添加以下内容:

Then inside the constructor add to the if statement the following:

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

返回home.components.ts文件，添加导入

Back in the home.components.ts file add the import

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

将服务注入到构造函数中:

Inject the service into the constructor:

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

最后，在ngOnInit()函数中，您可以像这样使用串行端口:

Finally, in the ngOnInit() function you can use the serial port like so:

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

这篇关于Angular(5)-电子串行端口支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！