ste ste - 1 year ago 226
AngularJS Question

AngularJS: Failed to load module only in Safari

I'm building an AngularJS application (version: 1.4.10) and recently I found out that ONLY in Safari the application does not work.

The errors I get are the following:

[Error] SyntaxError: Unexpected token '<' (anonymous function) (angular-slide.js:1)
[Error] SyntaxError: Unexpected token '>' (anonymous function) (landing.js:132)
Error: [$injector:modulerr] Failed to instantiate module myApp due to:
[$injector:modulerr] Failed to instantiate module myApp.landing due to:
[$injector:nomod] Module 'myApp.landing' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. (angular.js:4496)

This happens only in Safari. In Firefox and Chrome I only get this message from the console:

angular-slide.js:1 Uncaught SyntaxError: Unexpected token <

The line 132 of landing.js is the following:

scope.$watch(attrs.slider, (n, o) => {

The whole code of the directive is the following:

}]).directive('slider', function () {
return {
compile: function (element) {
// wrap tag
var contents = element.html();
element.html('<div class="slideable_content" style=" margin:0 !important; padding:0 !important; height: 300px;" >' + contents + '</div>');

return function postLink(scope, element, attrs) {
var i = 0;
// default properties
scope.$watch(attrs.slider, (n, o) => {
if (n !== o) {
var target = element[0],
content = target.querySelector('.slideable_content');
if(n) { = '1px solid rgba(0,0,0,0)';
var y = content.clientHeight, z = i; = 0; = y + 'px';
setTimeout(() => {
if (z === i) { = 'auto';
}, 500);
} else { = target.clientHeight + 'px';
setTimeout(() => { = '0px';

attrs.duration = (!attrs.duration) ? '0.5s' : attrs.duration;
attrs.easing = (!attrs.easing) ? 'ease-in-out' : attrs.easing;
'overflow': 'hidden',
'height': '0px',
'transitionProperty': 'height',
'transitionDuration': attrs.duration,
'transitionTimingFunction': attrs.easing

How can I make this directive Safari compliant and fix the error?

Answer Source

[Most] Browsers don't support es6 lambda's yet. You'll need to transpile your es6 to es5 using a tool like Babel.

In other words, the es5 equivalent of (n, o) => {...} is function(n, o) {...}.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download