Использование SerialPort в Electron с Angular дает сбой при сборке - PullRequest
Новая
       30

Использование SerialPort в Electron с Angular дает сбой при сборке

0 голосов
/ 08 декабря 2018

Я недавно начал экспериментировать с Electron и SerialPort и немного затрудняюсь, добавляя Angular (7+) в микс.

Так вот в чем проблема:

Я запускаю типичный угловойКоманды CLI для генерации в приложение.Я добавляю электрон и восстановление электронов как зависимости dev.Затем добавьте SerialPort в качестве зависимости.

Внутри моего 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 и электрон. 

npm run electron-build

И он достигает примерно 92% и умирает с этой ошибкой: 

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

Есть ли какой-то другой способ, которым я должен импортировать его?

1 Ответ

0 голосов
/ 08 декабря 2018

Краткий ответ:

  1. Install @ types / node 

    npm install --save-dev @types/node

  2. Измените свой tsconfig.json, например так - 

    {
  "compileOnSave": false,
   .....
      "compilerOptions": {
      "allowSyntheticDefaultImports": true,
      "moduleResolution": "node",
      "types": [
          "node"
       ]
   }
 }

Обратите внимание на клавиши types и allowSyntheticDefaultImports.

Добавьте это к своим 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']);
   }
 }
}

Примечание: у вас нет прямых require или import собственных зависимостей в angular.Вместо этого мы используем window ['require'], чтобы запросить модуль в нашем приложении.Вышеуказанное выражение import просто используется для предоставления информации о наборе текста для машинописи.

Длинный ответ:

См. Мой комментарий здесь .

...