Angular -Material with requirement
Today I am trying to set up angular stuff using requirejs, but I am getting annotation issue:
Error: ngMaterial requires HammerJS to be preloaded.
This config 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???
+3
source to share
1 answer
I had the same problem, you can hack it with this solution: https://github.com/angular/material/issues/456
What you need is just to deselect hammer.js with this proxy.
it worked for me, here is the required file:
'hammer': 'lib/hammerjs/hammer.min',
'hammerProxy': 'js/requirejs-proxy/hammer-proxy',
...
'angularMaterial': {
deps: ['angular', 'angular-animate', 'hammerProxy', 'angular-aria']
}
and here is the hammer-proxy.js file:
define(['hammer'], function (Hammer) {
this.Hammer = Hammer;
return Hammer;
});
Let me know if you need help with implantation.
+1
source to share