ng-view duplication in the 1.4.RC

[havenchyk]

Hi there,

I've upgraded my application to the 1.4-RC2 and found that after changing of the route e.g. from 'route1' to 'route2' there is several dom elements with ng-view attribute.
Issue is reproducible in my application with versions RC0, RC1 and RC2 and only on the route that will be handled in otherwise. E.g. '/Book'

I haven't able to reproduce this issue on jsbin, but it exists in my application.
http://jsbin.com/buzuwe/2/edit?html,js,output

Simplified version of my config looks like this:

app.config(function($routeProvider, $compileProvider) {
  $routeProvider
   .when('/Book/:bookId', {
    templateUrl: 'book.html',
    controller: 'BookController',
    resolve: {
      delay: function($q, $timeout) {
        var delay = $q.defer();
        $timeout(delay.resolve, 1000);
        return delay.promise;
      }
    }
  })
  .when('/Book/:bookId/ch/:chapterId', {
    templateUrl: 'chapter.html',
    controller: 'ChapterController'
  })
  .otherwise({
    redirectTo: '/',
    templateUrl: 'noRoute.html'
  });

$compileProvider.aHrefSanitizationWhitelist(...);

Could anyone help to find, what's the problem here? Is it a bug or just wrong structure of my application?

Thanks in advance

[gkalpak]

Are you using ngAnimate or other external modules ?
Do you define CSS animations on ngView ?

[havenchyk]

@gkalpak yep, I'm using ngAnimate module in couple of places.
ngAnimate used only in cases:
$animate.addClass(container, 'my-class');
$animate.enter(clone, $element.parent(), $element);
$animate.enabled(bool); //bool is true or false
That's it for $animate service.
CSS animations also here, I use transitions for ng-hide-add, ng-hide-remove and some other classes, but not especially for div with ng-view attribute..

[gkalpak]

$animate will handle all sorts of events from built-in directives (e.g. adding/removing classes, inserting/removing elements etc), even without your explicitly calling it.
But since you don't have animations on ngView, I don't know if it is ngAnimate's fault.
I would try to remove ngAnimate and see if the problem persists.

On the other hand, your routing configuration seems odd (incorrect ?). You are redirecting to a non-existent route (unless you haven't pasted the whole config) and you are specifying a templateUrl on a redirecting route.

In any case, it is next to impossible to troubleshoot this, without a minimal (live) reproduction (e.g. using codepen, plnkr, jsfiddle etc).

[havenchyk]

@gkalpak thanks for the tip to add ngAnimate, I finally able to reproduce this issue. Here is a link to jsbin http://jsbin.com/buzuwe/2/edit?html,js,output. Just click on Moby, Book, Moby, Book. Only reproducible after including ngAnimate.

[havenchyk]

Changing config to this solves the issue with duplication

.when('/', {
  templateUrl: 'noRoute.html'
})
.otherwise({
  redirectTo: '/'
});

[gkalpak]

@havenchyk, glad this is solved for you.

@matsko, although the issue appeared because of some incorrect routing configuration, I suspect leaving ngView elements in the DOM is indicative of some ngAnimate bug.

[havenchyk]

@gkalpak @matsko it looks like something wrong with ngAnimate, but I'm not ready to say, what exactly. I've got randomly leaved ng-view in the DOM with corrected route config.

[matsko]

I didn't know you can use otherwise with a templateUrl and a redirection.

The main point is that ngAnimate is screwing up somehow. I'm looking into it right now.