CODEWITHSUNDEEP
angularjsrequirejsangular-material
d.zurico
d.zurico

Reputation: 99

Angular-Material with RequireJs

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???

Upvotes: 3

Views: 2179

Answers (1)

vlio20
vlio20

Reputation: 9295

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.

Upvotes: 1

Related Questions