7

Problem description: This is not a duplicate of this Question. I'm not trying to access the electron module (I use a electron wrapper for angular to do this), I'm trying to use a npm native module in angular while running angular inside electron.

Original description: I have an angular app which I run with electron (A new app, doesn't do anything yet). To access Bluetooth I use noble and bleno but while they are working from within electron (to test this I added, noble = require('noble') to index.js in the electron folder) they do not work when I add for example noble to the app.compoents.js in angular.

This is my app.component.ts

import { Component } from '@angular/core';
import {ElectronService} from 'ngx-electron';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
    title: String = 'Colaboration room';
    noble = require('noble')

}

I get this error:

WARNING in ./node_modules/bindings/bindings.js 76:43-53 Critical dependency: the request of a dependency is an expression

While this is only a warning, the angular initial page is no longer displayed ( its empty).

Question: How can I access node native modules in Angular (when running in electron)?

Additional Information: Im using angulars default compiler webpack The native modules are build against the node version from electron with electron-rebuild. I use the ngx-electron module to access the electron api from within angular, thus my guessing that I cant just access noble from within angular without some modification.

Folder structure

enter image description here

Solution attempt: (Since I'm new to node and Angular, I'm happy for code improvements !)

Since I use a wrapper to access electrons apis I had no problem with the electron module. My real problem was that I didn't know how to access native node modules in angular.

One possible solution is to add the native npm module to webpacks script part (I did not test this yet). The other solution is to use require in electrons main.js and set it as a global variable.

const noble = require('noble');

global.sharedObj = noble;

You can then access this global variable using electrons api with the angular electron wrapper. 

getBluetoothCentralPulgin(){
  var es = new ElectronService();
  return es.remote.getGlobal('sharedObj');
}
MADforFUNandHappy
  • 538
  • 6
  • 24
  • Possible duplicate of [Bundle error using webpack for Electron application \`Cannot resolve module 'electron'\`](https://stackoverflow.com/questions/34427446/bundle-error-using-webpack-for-electron-application-cannot-resolve-module-elec) – Estus Flask Oct 15 '17 at 14:02
  • okay I will check that – MADforFUNandHappy Oct 15 '17 at 14:09
  • @estus I do not have a not found problem and I can build angular with electron, my question is about node native modules build against the node version from electron and why I cant use them in angular – MADforFUNandHappy Oct 15 '17 at 14:12
  • You have to exclude the modules that shouldn't be bundled by Webpack with `externals`. Or try to use `window.require` to skip them from bundling too. That's what the answers suggest. – Estus Flask Oct 15 '17 at 14:12
  • hm, would it still be possible to package them with electron ? When I do not bundle them, how can I use them ? ( I'm new to node) I will try that and report back. – MADforFUNandHappy Oct 15 '17 at 14:15
  • Node-specific modules should not be bundled with Webpack but reside in node_modules . – Estus Flask Oct 15 '17 at 14:24
  • @estus Okay I understand that, but my question is then about how to access native modules in angular and is therefore not a duplicate of the linked question. See my solution attempt which hopefully clarifies this. If there is however something fundamentally wrong in my understanding, please tell me. – MADforFUNandHappy Oct 16 '17 at 09:52
  • You access them by either disabling bundling for server side modules with `externals` or using them with `window.require` instead of `require`. This is what the answers say. I'm unable to confirm if this works for Angular application. See also https://electron.atom.io/docs/faq/#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron – Estus Flask Oct 16 '17 at 11:09
  • I read the answer and tried that yesterday but I still got the same error. Anyway the above solution worked for me in angular. – MADforFUNandHappy Oct 16 '17 at 11:18
  • angular cant access the system while running inside electron, the noble module has a bindings script which needs the os module. I guess thats why I get the warning. – MADforFUNandHappy Oct 16 '17 at 12:10

0 Answers0