在Electron和Angular中使用SerialPort失败 [英] Using SerialPort in Electron with Angular fails at build
问题描述
我最近开始尝试Electron和SerialPort,并在混合物中添加Angular(7+)时遇到了一点障碍.
I recently began to experiment with Electron and SerialPort and hit a little snag when adding Angular (7+) in the mix.
所以这是问题所在:
我运行典型的角度CLI命令以生成应用程序.我将电子和电子重建作为dev依赖项添加.然后添加SerialPort作为依赖项.
I run the typical angular CLI commands to generate to the app. I add electron and electron-rebuild as dev dependencies. Then add SerialPort as a dependency.
在我的app.component.ts内部-
Inside my app.component.ts -
import { Component, OnInit } from '@angular/core';
import * as SerialPort from 'serialport';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'electron-angular-serialport';
ngOnInit() {
SerialPort.list();
}
}
然后我运行npm命令以启动ng生成过程并启动电子.
Then I run the npm command to start the ng build process and electron .
npm run electron-build
它达到约92%并死于此错误:
And it gets to about 92% and dies with this error:
ERROR in ./node_modules/@serialport/bindings/lib/linux-list.js
Module not found: Error: Can't resolve 'child_process' in '/Users/22arwxpx/Documents/Coding/electron-angular-serialport/node_modules/@serialport/bindings/lib'
ERROR in ./node_modules/@serialport/bindings/lib/unix-write.js
Module not found: Error: Can't resolve 'fs' in '/Users/22arwxpx/Documents/Coding/electron-angular-serialport/node_modules/@serialport/bindings/lib'
ERROR in ./node_modules/@serialport/bindings/lib/unix-read.js
Module not found: Error: Can't resolve 'fs' in '/Users/22arwxpx/Documents/Coding/electron-angular-serialport/node_modules/@serialport/bindings/lib'
ERROR in ./node_modules/bindings/bindings.js
Module not found: Error: Can't resolve 'fs' in '/Users/22arwxpx/Documents/Coding/electron-angular-serialport/node_modules/bindings'
ERROR in ./node_modules/bindings/bindings.js
Module not found: Error: Can't resolve 'path' in '/Users/22arwxpx/Documents/Coding/electron-angular-serialport/node_modules/bindings'
ERROR in ./node_modules/@serialport/parser-byte-length/byte-length.js
Module not found: Error: Can't resolve 'stream' in '/Users/22arwxpx/Documents/Coding/electron-angular-serialport/node_modules/@serialport/parser-byte-length'
ERROR in ./node_modules/@serialport/parser-cctalk/cctalk.js
Module not found: Error: Can't resolve 'stream' in '/Users/22arwxpx/Documents/Coding/electron-angular-serialport/node_modules/@serialport/parser-cctalk'
ERROR in ./node_modules/@serialport/parser-delimiter/delimiter.js
Module not found: Error: Can't resolve 'stream' in '/Users/22arwxpx/Documents/Coding/electron-angular-serialport/node_modules/@serialport/parser-delimiter'
ERROR in ./node_modules/@serialport/parser-ready/ready.js
Module not found: Error: Can't resolve 'stream' in '/Users/22arwxpx/Documents/Coding/electron-angular-serialport/node_modules/@serialport/parser-ready'
ERROR in ./node_modules/@serialport/parser-regex/regex.js
Module not found: Error: Can't resolve 'stream' in '/Users/22arwxpx/Documents/Coding/electron-angular-serialport/node_modules/@serialport/parser-regex'
ERROR in ./node_modules/@serialport/stream/stream.js
Module not found: Error: Can't resolve 'stream' in '/Users/22arwxpx/Documents/Coding/electron-angular-serialport/node_modules/@serialport/stream'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! electron-angular-serialport@0.0.0 electron-build: `ng build --prod && electron .`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the electron-angular-serialport@0.0.0 electron-build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/22arwxpx/.npm/_logs/2018-12-08T03_13_40_398Z-debug.log
我还有其他导入方式吗?
Is there some other way that I should be importing it?
推荐答案
简短答案:
-
安装@ types/node
Install @types/node
npm install --save-dev @types/node
像这样修改您的tsconfig.json-
Modify your tsconfig.json like so-
{
"compileOnSave": false,
.....
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"moduleResolution": "node",
"types": [
"node"
]
}
}
记下
types
和allowSyntheticDefaultImports
键.
-
将此添加到您的polyfills.ts
Add this to your polyfills.ts
(window as any).global = window;
需要串行端口
import { Component } from '@angular/core';
import { } from 'electron';
import Serialport from 'serialport';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor() {
//check if platform is electron
let isElectron: boolean = window && window['process'] &&
window['process'].type;
if (isElectron) {
let serialport: typeof Serialport = window['require']('serialport');
let app: Electron.App = window['require']('electron').remote;
console.log(serialport, app, window['process']);
}
}
}
注意:您不直接在angular中直接
require
或import
本机依赖项.相反,我们使用window ['require']要求在我们的应用程序中使用该模块.上面的import
语句仅用于提供打字稿的打字信息.
Note : You do not directly
require
orimport
native dependencies in angular. Instead we use window['require'] to require the module in our app. Theimport
statement above is just used to provide for typings information to typescript.
长答案:
在此处中查看我的评论.
Long answer :
See my comment here.
这篇关于在Electron和Angular中使用SerialPort失败的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!