Angular-Material with RequireJs

Question

today I'm tryng to configure angular material with requirejs but I receive an annoing problem:

Error: ngMaterial requires HammerJS to be preloaded.

This's my configurator file:

require.config
  paths:
    jquery: "../bower_components/jquery/dist/jquery"
    domReady: "../bower_components/requirejs-domready/domReady"
    underscore: "../bower_components/underscore/underscore"
    store: "../bower_components/store-js/store"
    moment: "../bower_components/moment/min/moment-with-langs"
    jsonPath: "../libs/jsonpath-0.8.0"

    es5Shim: "../bower_components/es5-shim/es5-shim"
    consoleShim: "../bower_components/console-shim/console-shim"
    json3: "../bower_components/json3/lib/json3.min"
    promise: "../bower_components/es6-promise/promise.min"

    hammer: "../bower_components/hammerjs/hammer"
    angular: "../bower_components/angular/angular"
    ngAnimate: "../bower_components/angular-animate/angular-animate.min"
    ngAria: "../bower_components/angular-aria/angular-aria.min"
    ngMaterial: "../bower_components/angular-material/angular-material"
    ngRoute: "../bower_components/angular-route/angular-route"

    baseObject: "scripts/helpers/base-object"
    app: "scripts/app/app"
    env: "../env"

  shim:
    hammer:
      exports: "Hammer"

    angular:
      exports: "angular"
      deps: [ "jquery" ]

    ngRoute:
      exports: "angularRoute"
      deps: [ "angular" ]

    ngAnimate:
      exports: "angularAnimate"
      deps: [ "angular" ]

    ngAria:
      exports: "angularAria"
      deps: [ "angular" ]

    ngMaterial:
      exports: "angularMaterial"
      deps: ["Hammer", "angular"]

    underscore:
      exports: "_"

    jsonPath:
      exports: "jsonPath"

    promise:
      exports: "Promise"

  deps: [
    "jquery","hammer", "angular", "ngMaterial", "ngAnimate", "ngAria", "consoleShim", "es5Shim", "consoleShim",
    "json3", "underscore", "baseObject", "promise", "env"
  ]

What's wrong???

vlio20 · Accepted Answer · 2014-12-19 15:31:52Z

1

I had the same issue, you can hack it with this solution: https://github.com/angular/material/issues/456

What you need is just to wrrap the hammer.js with this proxy.

it worked for me, here is the require file:

'hammer': 'lib/hammerjs/hammer.min',
'hammerProxy': 'js/requirejs-proxy/hammer-proxy',
...
'angularMaterial': {
     deps: ['angular', 'angular-animate', 'hammerProxy', 'angular-aria']
}

and here is hammer-proxy.js file:

define(['hammer'], function (Hammer) {
    this.Hammer = Hammer;
    return Hammer;
});

Let me know if you need any help with implamintation.

edited Dec 19, 2014 at 15:31

answered Dec 19, 2014 at 15:25

vlio20

9,33518 gold badges104 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

zygimantus Over a year ago

I am trying similar stuff, but I am getting this error: TypeError: angular.module(...).info is not a function in angular-animate.js file.

Collectives™ on Stack Overflow

Angular-Material with RequireJs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related