angular: Router Animation query empty list error

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Errors
`query(":enter")` returned zero elements. (Use `query(":enter", { optional: true })` if you wish to allow this.)
`query(":leave")` returned zero elements. (Use `query(":leave", { optional: true })` if you wish to allow this.)

Expected behavior Animation

Minimal reproduction of the problem with instructions http://plnkr.co/edit/8Q4OGqtLtSzRi7xqyGAL?p=preview Switch between page1 and page2

Angular version: 4.2.0-rc.0
Browser: Chrome (at least)
Language: TypeScript 2.2.1 (or 2.3.2) does not matter

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 23 (10 by maintainers)

Most upvoted comments

If you append an {optional: true} object as the last parameter of the query() function then the error goes away.

i.e.

trigger("routeAnimation", [
   transition("page1 <=> page2", [
   query(":enter", [
      style({
         position:  "absolute",
         top:       0,
         transform: "translateX(100%)"
      }),
      animate("30s linear", style({transform: "translateX(0%)"})),
      animateChild()
   ], {optional: true}),
   query(":leave", [
      style({
         position:  "absolute",
         top:       0,
         transform: "translateX(0%)"
      }),
      animate("30s linear", style({transform: "translateX(-100%)"})),
      animateChild()
      ], {optional: true})
   ])
])

However, the animation still doesn’t fire on route change 😦

+11

dharders on May 22, 2017

Awesome … many thanks @matsko…

When is the next release due? Will it be another RC?

thaoula on May 26, 2017

@dharders Thanks for translate English to English )

Delagen on May 22, 2017

@matsko Very similar example was created by stevenmyhre: http://plnkr.co/edit/5nGn32ABLtNNb3kaAhBF?p=preview I’ll try to make my own example tomorrow.

kykint on Jul 17, 2017