Using SerialPort in Electron with Angular fails at build

Question

I recently began to experiment with Electron and SerialPort and hit a little snag when adding Angular (7+) in the mix.

So here's the problem:

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.

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

Then I run the npm command to start the ng build process and electron .

npm run electron-build

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?

Answer 1

Short answer :

1. Install @types/node

   npm install --save-dev @types/node
   

2. Modify your tsconfig.json like so-

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

Take note of types and allowSyntheticDefaultImports key.

3. Add this to your polyfills.ts

   (window as any).global = window;

4. Require serialport

   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']);
      }
    }
   }
   

Note : You do not directly require or import native dependencies in angular. Instead we use window['require'] to require the module in our app. The import statement above is just used to provide for typings information to typescript.

Long answer :

See my comment here.