How to use ng-table with webpack?

Question

I'm trying to use ng-table in my anuglarjs application. I didn't realize that npm version is f up and new release is not there yet, however my app is in an advenced stage and I can not use bower vesion.

I was trying to load latest version from git npm install git+ssh://git@github.com/esvit/ng-table.git --save

and then load it in my entry file:

import angular from 'angular';
import ngTable from 'ng-table';

angular.module('app', [ngTable]);

Sadly webpack throw a lot of errors:

ERROR in ./src/app.js
Module not found: Error: Cannot resolve module 'angular'(...)

I was also trying to use imports-loader:

const ngTable = require('imports?define=>false,angular!ng-table');

but no success either. Could somebody points me in right direction? I really would like to not rewrite all chore stuff because of the one lib.

Diego Toro · Answer 1 · 2016-02-15T20:28:20.190

3

you can use ng-table like this:

// app.js
import angular from 'angular';
import ngTable from 'ng-table/dist/ng-table';

angular.module('app', [ngTable]);

since looks like doesn't have and index config for commonjs modules

check this comment https://github.com/esvit/ng-table/issues/764#issuecomment-184357333

edited Feb 15 '16 at 20:28

answered Feb 15 '16 at 19:56

Diego Toro

33
5

Alright webpack build successfully pass, however there is an error in the console: http://i.imgur.com/P2T3N4x.png – Eggy Feb 15 '16 at 20:21
sorry but can't figure out what's wrong, do you have a repo url? – Diego Toro Feb 15 '16 at 20:30
I can upload to github the test I did earlier – Diego Toro Feb 15 '16 at 21:18
Would be great, maybe I will find out why I'm getting this error – Eggy Feb 15 '16 at 21:25
here is the repo https://github.com/IngenieroLata/test-ng-table let me know if have troubbles – Diego Toro Feb 15 '16 at 21:51
Alright, I will see why now it's working and with previous version it wasn't. Thanks a lot with help! – Eggy Feb 15 '16 at 22:03

score 1 · Answer 2 · answered Feb 23 '17 at 18:40

I was trying to find the solution as well. Here it is. "import" quiet does not work for me. Gives out an error

webpack.config.js

config.resolve = {
  extensions: ['', '.js'],
  alias: {
    'ng-table': 'ng-table/dist/ng-table'
  },
  modulesDirectories: [ 'node_modules', 'bower_components' ],
};

config.module = {
  loaders: [{
    test: require.resolve('ng-table'),
    loader: 'imports-loader?define=>false,$=jquery,angular'
   }]
}

app.js

angular.module('app', ['ngTable']);

define=>false was the one of key things which I was missing when following the github answer. and injecting angular into ng-table is being done in the loader line.

How to use ng-table with webpack?

2 Answers2