如何在Webpack中使用ng-table？

Question

我正在尝试在我的angularjs应用程序中使用ng-table。我没有意识到npm版本出了问题，并且新版本还没有发布，但是我的应用程序已经处于高级阶段，我不能使用bower版本。

我尝试从git加载最新的版本npm install git+ssh://[e-mail]/esvit/ng-table.git --save，

然后在我的入口文件中加载它：

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

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

遗憾的是，Webpack 抛出了许多错误：

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

我也试图使用imports-loader：

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

但也没有成功。能否有人指点我正确的方向？因为这个库，我真的不想重写所有的琐碎工作。

- Eggy

Answer 1

您可以像这样使用ng-table：

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

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

看起来似乎没有针对commonjs模块的索引配置。

请查看此评论：https://github.com/esvit/ng-table/issues/764#issuecomment-184357333

- Diego Toro

---

好的，webpack 构建成功通过，但控制台出现错误：http://i.imgur.com/P2T3N4x.png。 - Eggy

抱歉，我无法找出问题所在，你有代码存储库的URL吗？ - Diego Toro

我可以将我之前的测试上传到 GitHub。 - Diego Toro

很好，也许我会找出为什么会出现这个错误。 - Eggy

这是代码库 https://github.com/IngenieroLata/test-ng-table 如果有问题请告诉我。 - Diego Toro

好的，我会看看为什么现在它能工作而之前的版本不能。非常感谢你的帮助！ - Eggy

Answer 2

我也在寻找解决方案。这就是它。"import" quiet 对我不起作用。会输出一个错误。

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"是我在遵循GitHub答案时缺失的关键内容之一。将angular注入ng-table是在加载器行中完成的。"

- Sairam