animate.js removeClass seems to call setClass with a wrong type

[thomasvs]

I was getting tracebacks in my angular application.

I tracked it down to what I believe is removeClass calling setClass wrong:

https://github.com/angular/angular.js/blob/master/src/ngAnimate/animate.js#L1114

shows

return this.setClass(element, [], className, options);

while the second argument to setClass is supposed to be a string according to:

• @param {string} add the CSS classes which will be added to the element

but instead a list ([]) is passed in; which throws an error in a foreach:

forEach(cssClasses.split(' '), function(cssClass) {

where this fails because you can't call split on an empty list.

[wesleycho]

Looking at the source code, passing an array is fine - the array would get serialized into a string at worst here .

Can you give a fuller stack trace? It would be easier to figure out the error, since as far as I can tell, cssCasses should already be a string by the time it reaches jqLiteRemoveClass.

[thomasvs]

TypeError: undefined is not a function
at jqLiteAddClass (angular.js:2572)
at angular.js:4436
at forEach (angular.js:328)
at Object.setClass (angular.js:4435)
at Object.setClass (angular-animate.js:980)
at Object.removeClass (angular-animate.js:944)
at Object.fn (ui-bootstrap-tpls.js:1689)
at Scope.$digest (angular.js:12715)
at Scope.$apply (angular.js:12980)
at done (angular.js:8496)

I'm not sure I follow - even if the type conversion could conceivably do the right thing (although I'm not sure why an empty array would get converted to a string) - why not simply call the function with the value already correct instead of wrong-but-potentially-converted-to-right-type ?

[petebacondarwin]

@thomasvs - can you check if this is still an issue in the latest version of ngAnimate since it has been completed rewritten recently?

[Narretz]

I'm gonna close this, as

• it's likely that this is fixed in 1.4
• there's no reproduce scenario available, so we aren't even sure if this is an error at all

[bartolkaruza]

I'm running into this same issue on the latest version ngAnimate, 1.4.3

My bower dependencies;

{
    "name": "myapp",
    "version": "0.0.1",
    "dependencies": {
        "angular": ">=1.4.*",
        "angular-resource": ">=1.4.*",
        "angular-animate": ">=1.4.*",
        "angular-cookies": ">=1.4.*",
        "angular-sanitize": ">=1.4.*",
        "angular-messages": ">=1.4.*",
        "angular-ui-router": "latest",
        "material-design-icons": ">=1.0.1",
        "lodash": "~2.4.1",
        "angular-material": "0.8.3",
        "angular-socket-io": "~0.6.0",
        "angular-i18n": "~1.3.14",
        "angular-moment": "~0.9.0",
        "angular-socket-io": "~0.6.0"
    },
    "devDependencies": {
        "angular-mocks": ">=1.2.*",
        "angular-scenario": ">=1.2.*",
        "should": "shouldjs/should.js#~4.4.1"
    },
    "resolutions": {
        "angular": ">=1.4.*",
        "angular-animate": ">=1.4.*"
    }
}

The project is generated using this yeoman generator generator and others are running into the same issue

Generating a project, using the generator-material-app should give you an easy reproduce scenario.

[matsko]

@bartolkaruza would you mind creating a new issue, explaining in detail as to what's going on, providing a demo which uses 1.4.3 (use http://plnkr.co/)? Please mention me in the issue so that I can fix it as soon as possible.

[jliang6]

Just use Angular-Material;s startup project: https://github.com/angular/material-start

Run it with the instruction, and then you'll see this problem in the chrome console.

This happens even after jQuery is loaded before all angularJS libraries.