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

In electron.service.ts add the import:

import * as SerialPort from 'serialport';

Then inside the ElectronService class add:

serialPort: typeof SerialPort;

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

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

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){...}

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

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

try:

getPorts() {
     this.serial.serialPort.list((err, ports) => {
       ports.forEach(port => {
         this.comPorts.push(port);
       });
     });
   }

You don't have to rewrite your app. Just create a chrome app and use webview for your actual cloud app. Basicaly you have to write the serial port communication in the chrome app context and pass the data to your webview context in your chrome app which is actually the app loaded from your cload.

Other approach is to write your whole application in an offline chrome app and communicate with your cloud server trought ajax or websocket.

Another thing might help is nw.js. With this you can create desktop like apps with web technology. Basicaly in your nw.js app you will use a node.js serial modul for serial communication.

Or combinate these methods.

I suggest one of the chrome app way cuz I have good experience with its serial module.