Configuring an AngularJs app that uses Webpack to include node modules such as 'net' and 'fs'

I am running an angular JS app that is going to use a node module 'box-sdk' and this module requires internal node modules such as 'FS' and 'net'.

I believe there is a way to configure webpack to include these modules to run on the browser, however, I am not too sure how. Any help is appreciated!

Command ran:

npm run test

Error:

ERROR in ./~/box-node-sdk/lib/box-client.js
Module not found: Error: Cannot resolve module 'net' in /Users/Davix/Source/revaBoxWeb/node_modules/box-node-sdk/lib
 @ ./~/box-node-sdk/lib/box-client.js 33:8-22

Files

webpack.config.js

/*
 * When testing with Webpack and ES6, we have to do some
 * preliminary setup. Because we are writing our tests also in ES6,
 * we must transpile those as well, which is handled inside
 * `karma.conf.js` via the `karma-webpack` plugin. This is the entry
 * file for the Webpack tests. Similarly to how Webpack creates a
 * `bundle.js` file for the compressed app source files, when we
 * run our tests, Webpack, likewise, compiles and bundles those tests here.
*/

import angular from 'angular';

// Built by the core Angular team for mocking dependencies
import mocks from 'angular-mocks';
//import node-libs-browser from 'node-libs-browser';
import BoxSDK from 'box-node-sdk';

// We use the context method on `require` which Webpack created
// in order to signify which files we actually want to require or import.
// Below, `context` will be a/an function/object with file names as keys.
// Using that regex, we scan within `client/app` and target
// all files ending with `.spec.js` and trace its path.
// By passing in true, we permit this process to occur recursively.
let context = require.context('./client/app', true, /\.spec\.js/);

// Get all files, for each file, call the context function
// that will require the file and load it here. Context will
// loop and require those spec files here.
context.keys().forEach(context);

karma.config.js

module.exports = function (config) {
  config.set({
    // base path used to resolve all patterns
    basePath: '',

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha', 'chai'],

    // list of files/patterns to load in the browser
    files: [{ pattern: 'spec.bundle.js', watched: false }],

    // files to exclude
    exclude: [],

    plugins: [
      require("karma-chai"),
      require("karma-chrome-launcher"),
      require("karma-mocha"),
      require("karma-mocha-reporter"),
      require("karma-sourcemap-loader"),
      require("karma-webpack")
    ],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: { 'spec.bundle.js': ['webpack', 'sourcemap'] },

    webpack: {
      devtool: 'inline-source-map',
      module: {
        loaders: [
          { test: /\.js/, exclude: [/app\/lib/, /node_modules/], loader: 'babel' },
          { test: /\.html$/, loader: 'raw' },
          { test: /\.(scss|sass)$/, loader: 'style!css!sass' },
          { test: /\.css$/, loader: 'style!css' }
        ]
      }
    },

    webpackServer: {
      noInfo: true // prevent console spamming when running in Karma!
    },

    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['mocha' , 'progress'],

    // web server port
    port: 9876,

    // enable colors in the output
    colors: true,

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    // toggle whether to watch files and rerun tests upon incurring changes
    autoWatch: true,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],

    // if true, Karma runs tests once and exits
    singleRun: true
  });
};

package.json

{
  "name": "reva_box_metadata_interface",
  "version": "0.0.1",
  "description": "Web Box Angular Interface",
  "main": "index.js",
  "dependencies": {
    "angular": "^1.5.0",
    "angular-ui-router": "^1.0.0-beta.1",
    "box-node-sdk": "^1.3.0",
    "normalize.css": "^3.0.3"
  },
  "devDependencies": {
    "angular-mocks": "^1.5.0",
    "babel-core": "^6.7.7",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-runtime": "^6.7.5",
    "babel-polyfill": "^6.7.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-register": "^6.7.2",
    "babel-runtime": "^6.6.1",
    "browser-sync": "^2.11.1",
    "chai": "^3.4.0",
    "connect-history-api-fallback": "^1.1.0",
    "css-loader": "^0.19.0",
    "del": "^2.2.0",
    "fs-walk": "0.0.1",
    "gulp": "^3.9.1",
    "gulp-rename": "^1.2.2",
    "gulp-template": "^3.0.0",
    "gulp-util": "^3.0.7",
    "html-webpack-plugin": "^1.7.0",
    "karma": "^0.13.22",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^0.2.0",
    "karma-mocha": "^0.2.0",
    "karma-mocha-reporter": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.4",
    "karma-webpack": "^1.5.1",
    "lodash": "^4.11.1",
    "mocha": "^2.3.0",
    "ng-annotate-loader": "0.0.10",
    "node-libs-browser": "^0.5.0",
    "node-sass": "^3.13.0",
    "raw-loader": "^0.5.1",
    "run-sequence": "^1.1.0",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.12.2",
    "supports-color": "^3.1.2",
    "webpack": "^1.13.3",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-hot-middleware": "^2.6.0",
    "yargs": "^3.9.0"
  },
  "scripts": {
    "build": "gulp webpack",
    "component": "gulp component",
    "serve": "gulp serve",
    "start": "gulp serve",
    "test": "karma start",
    "watch": "gulp serve",
    "webpack": "gulp webpack"
  },
  "keywords": [
    "angular",
    "webpack",
    "es6"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/noobiehacker/revaBoxWeb"
  },
  "author": "Revasolution",
  "license": "Apache-2.0",
  "babel": {
    "plugins": [
      "transform-runtime"
    ],
    "presets": [
      "es2015",
      "stage-0"
    ]
  }
}

spec.bundle.js

/*
 * When testing with Webpack and ES6, we have to do some
 * preliminary setup. Because we are writing our tests also in ES6,
 * we must transpile those as well, which is handled inside
 * `karma.conf.js` via the `karma-webpack` plugin. This is the entry
 * file for the Webpack tests. Similarly to how Webpack creates a
 * `bundle.js` file for the compressed app source files, when we
 * run our tests, Webpack, likewise, compiles and bundles those tests here.
*/

import angular from 'angular';

// Built by the core Angular team for mocking dependencies
import mocks from 'angular-mocks';
//import node-libs-browser from 'node-libs-browser';
import BoxSDK from 'box-node-sdk';

// We use the context method on `require` which Webpack created
// in order to signify which files we actually want to require or import.
// Below, `context` will be a/an function/object with file names as keys.
// Using that regex, we scan within `client/app` and target
// all files ending with `.spec.js` and trace its path.
// By passing in true, we permit this process to occur recursively.
let context = require.context('./client/app', true, /\.spec\.js/);

// Get all files, for each file, call the context function
// that will require the file and load it here. Context will
// loop and require those spec files here.
context.keys().forEach(context);

Thank you!!!

via noobiehacker