2

I try to use the QuickBlox JavaScript SDK in an Angular 4 browser app.

At first I created a new project using Angular-CLI. Then I installed QuickBox using 

npm install quickblox --save

In my app.component.ts I added this import

import { QB } from 'quickblox';

When I try to use QB in my code webpack fails to compile with the following error:

ERROR in ./~/node-xmpp-client/lib/Client.js
Module not found: Error: Can't resolve 'child_process' in 'C:\dev\workspace_js\qb\node_modules\node-xmpp-client\lib'
 @ ./~/node-xmpp-client/lib/Client.js 15:11-35
 @ ./~/node-xmpp-client/index.js
 @ ./~/quickblox/src/modules/qbChat.js
 @ ./~/quickblox/src/qbMain.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

I tried to add QB to the app.module.ts, installed the node-xmpp-client package but nothing works. Maybe my import statement is wrong? The docs only shows how to use it with require.

How can I use QuickBlox with Angular 4? Can I use the npm package for a client side (browser) application?

Peter Lustig
  • 1,585
  • 1
  • 18
  • 34
  • Are you trying to use this in a web page? QuickBlox seems like a back-end module and seems to require the node api, which will be unavailable in a browser. Looking at their docs you need to include a client script, not the node module. – Jason Goemaat Jul 28 '17 at 08:00
  • @JasonGoemaat yes I try to create a client app for the browser. The client script is the – Peter Lustig Jul 28 '17 at 08:13
  • I think so, never used it myself. It looks like as of 2.6 you only need to include the one script, prior to 2.5 you needed jquery first, or you could use bower. ([npm page](https://www.npmjs.com/package/quickblox)) – Jason Goemaat Jul 28 '17 at 08:22
  • How can I access objects from that library when i include it via the script tag in my index.html? I need some import statement in my .ts file to be resolved. But the imports i tried can't be resolved. When I install bower it says I should use npm or yarn :/ – Peter Lustig Jul 28 '17 at 08:53

2 Answers2

1

you can try adding in the index.html this: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/quickblox/2.11.0/quickblox.min.js"></script>

and then in your provider (under the imports, outside the class):

declare var QB: any;

The try to console.log(QB) to see if it is imported.

Niccolò Fanton
  • 552
  • 1
  • 5
  • 19
0

Of course, this doesn't seem like the best fix. anyway you can get rid of this issue by adding 

module.exports.node = {
  child_process: 'empty'
}

in webpack config.Since it is not a better idea to modify a third party library

SAMUEL
  • 8,098
  • 3
  • 42
  • 42
  • To modifiy the webpack.config in an Angular 4 CLI project I have to 'eject' it and won't be able to run commands like 'ng serve' anymore. Update: after ejecting the config the webpack-dev-server shows some errrors. – Peter Lustig Jul 28 '17 at 08:05
  • insted of `ng-serve` you can use `npm run build & npm run start` – SAMUEL Jul 28 '17 at 08:09
  • @SamuelJMathew or anyone, Can you please tell me where can I find/add this configuration in an ionic 3 project? – Abhishek Shaw Sep 05 '17 at 10:01