using ngResource with webpack - angularjs

Question

Good morning everyone,
I recently started using webpack on a new angular project. I really like it, very easy to use. I just have one problem, for now.
I'm trying to import ngResource to use on one of my modules, but not way I try works. I'm using webpack with babel loader (es6)
I tried each of the following ways:
//1
import ngResource from 'ng-resource'
angular.module('app', [ngResource])
//2
import 'ng-resource'
angular.module('app', ['ngResource'])
//3
import ngResource from 'ng-resource'
angular.module('app', [ngResource.name])
I tried even adding the following loader:
{
test: /[\/]angular-resource\.js$/,
loader: 'exports?angular.module(\'ngResource\')'
}
and then on my module:
angular.module('app', ['ngResource'])
What am I doing wrong? I can't figure it out :(
Thanks in advance,
Chaim

Answer 1

I was banging my head over this as well, it turns out you need
npm install angular-resource instead of npm install ng-resource
and then do:
import ngResource from 'angular-resource'
or one of the other methods you tried, they all work..

Answer 2

you should import it as following:
import ngResource from 'angular-resource';
and then:
angular
.module('app', [
ngResource,
...
]);
The same rule to import any other angular core module

Answer 3

this is right way:
var ngResource = require('ng-resource');
ngResource = ngResource(window, angular);
var yourmodule = angular.module( 'yourmodule', [ 'ngResource' ] )...