Recursion not supported

[kresogalic8]

hey man, before everything just wanted to say a good job on animations, I really love it!

So here's my problem, I followed your project here and I am getting this error "ERROR in Recursion not supported, resolving symbol LayoutComponent". Probably I did something wrong here, but I think query in the query isn't something that's working here.

Here's my code below:

trigger('routerAnimations', [
            transition('* => *', [
                query(':enter, :leave',
                    style({
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        right: 0
                    }), {
                        optional: true
                    }),
                query(':enter .project', [
                    style({
                        opacity: 1,
                        transform: 'translate(0%, 150px) matrix(1.0, 0.07, 0, 1, 0, 0)'
                    })
                ]),
                query(':enter', [
                    style({
                        opacity: 1
                    }),
                    query('.project', [
                        style({
                            opacity: 0,
                            transform: 'translate(0%, 150px) matrix(1.0, 0.07, 0, 1, 0, 0)'
                        })
                    ], {
                        optional: true
                    }),
                    query('.resources__open-sources .card', [
                        style({
                            opacity: 0,
                            transform: 'translate(0%, -50px) matrix(1.0, 0.07, 0, 1, 0, 0)'
                        })
                    ], {
                        optional: true
                    }),
                    query('.content__header-intro h2 span', [
                        style({
                            opacity: 0,
                            transform: 'translate(0%, 100%) matrix(1.0, 0.07, 0, 1, 0, 0)'
                        })
                    ], {
                        optional: true
                    })
                ], {
                    optional: true
                }),
                query(':leave', [
                    animate('400ms cubic-bezier(.17,.67,.27,1.2)', style({
                        opacity: 0
                    }))
                ], {
                    optional: true
                }),
                group([
                    query(':enter', [
                        animate('400ms cubic-bezier(.17,.67,.27,1.2)', style('*'))
                    ], {
                        optional: true
                    }),
                    query(':enter .project', [
                        stagger(50, [
                            animate('400ms cubic-bezier(.17,.67,.27,1.2)', style('*'))
                        ])
                    ], {
                        optional: true
                    }),
                    query(':enter .resources__open-sources .card', [
                        stagger(50, [
                            animate('400ms cubic-bezier(.17,.67,.27,1.2)', style('*'))
                        ])
                    ], {
                        optional: true
                    }),
                    query(':enter .content__header-intro h2 span', [
                        stagger(50, [
                            animate('400ms cubic-bezier(.17,.67,.27,1.2)', style('*'))
                        ])
                    ], {
                        optional: true
                    })
                ])
            ])
        ])

[abizit]

@kresogalic8 any solution.. Im using Angular cli and i have the same issue when i try to build. I get
ERROR in Recursion not supported, resolving symbol

My code:

export const slideDown = [
    query(':leave,:enter', style({
        position: 'absolute', left: 0, right: 0, width:'100%',minHeight:'100%'
    })),
    query(':leave', style({transform: 'translate3d(0%,0,0)'}), {optional: true}),
    query(':enter', style({transform: 'translate3d(0,-100%,0)'}), {optional: true}),
    group([
        query(':leave', group([
            animate('500ms cubic-bezier(.35,0,.25,1)', style({transform: 'translate3d(0,100%,0)'})), // y: '-100%'
        ]), {optional: true}),
        query(':enter', group([
            animate('500ms cubic-bezier(.35,0,.25,1)', style({transform: 'translate3d(0,0,0)'})),
        ]), {optional: true})
    ])
];

[pageii]

same issue.

It's running awesome on ng serve. However, when --aot or --prod is used, it couldn't compile:

ERROR in Recursion not supported, resolving symbol AppComponent in /Users/home/Desktop/ng4-animations-preview-master/src/app/app.component.ts, resolving symbol AppComponent in /Users/home/Desktop/ng4-animations-preview-master/src/app/app.component.ts, resolving symbol AppComponent in /Users/home/Desktop/ng4-animations-preview-master/src/app/app.component.ts, resolving symbol AppComponent in /Users/home/Desktop/ng4-animations-preview-master/src/app/app.component.ts, resolving symbol AppComponent in /Users/home/Desktop/ng4-animations-preview-master/src/app/app.component.ts, resolving symbol AppComponent in /Users/home/Desktop/ng4-animations-preview-master/src/app/app.component.ts

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/Users/home/Desktop/ng4-animations-preview-master/src'
 @ ./src/main.ts 3:0-74
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
webpack: Failed to compile.

[Web2Integrators]

any update here

[alshdavid]

macOS 10.12.6
node v8.4.0
ng CLI 1.3.0

I get three different issues, all of which appear seemingly randomly.

ng serve works perfectly. I am unable to run ng build, ng build --prod, ng build --prod --aot, ng serve --prod, ng serve --aot, ng serve --prod --aot without it throwing one of the three errors below.

Error one is the same as above:

ERROR in Recursion not supported, resolving symbol AppComponent in /Users/alshdavid/Desktop/ng4-animations-preview-master/src/app/app.component.ts, resolving symbol AppComponent in /Users/alshdavid/Desktop/ng4-animations-preview-master/src/app/app.component.ts, resolving symbol AppComponent in /Users/alshdavid/Desktop/ng4-animations-preview-master/src/app/app.component.ts, resolving symbol AppComponent in /Users/alshdavid/Desktop/ng4-animations-preview-master/src/app/app.component.ts, resolving symbol AppComponent in /Users/alshdavid/Desktop/ng4-animations-preview-master/src/app/app.component.ts, resolving symbol AppComponent in /Users/alshdavid/Desktop/ng4-animations-preview-master/src/app/app.component.ts

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/Users/alshdavid/Desktop/ng4-animations-preview-master/src'
 @ ./src/main.ts 4:0-74
 @ multi ./src/main.ts

Error two is:

vendor.39a603ecde577a7c240a.bundle.js:1 ERROR TypeError: Cannot read property 'type' of null
    at O (vendor.39a603ecde577a7c240a.bundle.js:1)
    at t.visitTransition (vendor.39a603ecde577a7c240a.bundle.js:1)
    at vendor.39a603ecde577a7c240a.bundle.js:1
    at Array.forEach (<anonymous>)
    at t.visitTrigger (vendor.39a603ecde577a7c240a.bundle.js:1)
    at O (vendor.39a603ecde577a7c240a.bundle.js:1)
    at t.build (vendor.39a603ecde577a7c240a.bundle.js:1)
    at j (vendor.39a603ecde577a7c240a.bundle.js:1)
    at e.t.registerTrigger (vendor.39a603ecde577a7c240a.bundle.js:1)
    at vendor.39a603ecde577a7c240a.bundle.js:1

vendor.39a603ecde577a7c240a.bundle.js:1 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'type' of null
TypeError: Cannot read property 'type' of null
    at O (vendor.39a603ecde577a7c240a.bundle.js:1)
    at t.visitTransition (vendor.39a603ecde577a7c240a.bundle.js:1)
    at vendor.39a603ecde577a7c240a.bundle.js:1
    at Array.forEach (<anonymous>)
    at t.visitTrigger (vendor.39a603ecde577a7c240a.bundle.js:1)
    at O (vendor.39a603ecde577a7c240a.bundle.js:1)
    at t.build (vendor.39a603ecde577a7c240a.bundle.js:1)
    at j (vendor.39a603ecde577a7c240a.bundle.js:1)
    at e.t.registerTrigger (vendor.39a603ecde577a7c240a.bundle.js:1)
    at vendor.39a603ecde577a7c240a.bundle.js:1
    at O (vendor.39a603ecde577a7c240a.bundle.js:1)
    at t.visitTransition (vendor.39a603ecde577a7c240a.bundle.js:1)
    at vendor.39a603ecde577a7c240a.bundle.js:1
    at Array.forEach (<anonymous>)
    at t.visitTrigger (vendor.39a603ecde577a7c240a.bundle.js:1)
    at O (vendor.39a603ecde577a7c240a.bundle.js:1)
    at t.build (vendor.39a603ecde577a7c240a.bundle.js:1)
    at j (vendor.39a603ecde577a7c240a.bundle.js:1)
    at e.t.registerTrigger (vendor.39a603ecde577a7c240a.bundle.js:1)
    at vendor.39a603ecde577a7c240a.bundle.js:1
    at c (polyfills.17d8f276e039b1192a7e.bundle.js:1)
    at polyfills.17d8f276e039b1192a7e.bundle.js:1
    at t.invokeTask (polyfills.17d8f276e039b1192a7e.bundle.js:1)
    at Object.onInvokeTask (vendor.39a603ecde577a7c240a.bundle.js:1)
    at t.invokeTask (polyfills.17d8f276e039b1192a7e.bundle.js:1)
    at r.runTask (polyfills.17d8f276e039b1192a7e.bundle.js:1)
    at o (polyfills.17d8f276e039b1192a7e.bundle.js:1)
    at <anonymous>

Error three is:

ERROR Error: Found the synthetic property @routerAnimations. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.
    at v (vendor.39a603ecde577a7c240a.bundle.js:1)
    at e.t.setProperty (vendor.39a603ecde577a7c240a.bundle.js:1)
    at t.setProperty (vendor.39a603ecde577a7c240a.bundle.js:1)
    at Te (vendor.39a603ecde577a7c240a.bundle.js:1)
    at Ee (vendor.39a603ecde577a7c240a.bundle.js:1)
    at we (vendor.39a603ecde577a7c240a.bundle.js:1)
    at Zn (vendor.39a603ecde577a7c240a.bundle.js:1)
    at Kn (vendor.39a603ecde577a7c240a.bundle.js:1)
    at wr (vendor.39a603ecde577a7c240a.bundle.js:1)
    at Object.updateRenderer (main.fc216b03541b1a27e00a.bundle.js:1)
b @ vendor.39a603ecde577a7c240a.bundle.js:1
t.handleError @ vendor.39a603ecde577a7c240a.bundle.js:1
(anonymous) @ vendor.39a603ecde577a7c240a.bundle.js:1
t.invoke @ polyfills.17d8f276e039b1192a7e.bundle.js:1
r.run @ polyfills.17d8f276e039b1192a7e.bundle.js:1
t.runOutsideAngular @ vendor.39a603ecde577a7c240a.bundle.js:1
e.tick @ vendor.39a603ecde577a7c240a.bundle.js:1
e._loadComponent @ vendor.39a603ecde577a7c240a.bundle.js:1
e.bootstrap @ vendor.39a603ecde577a7c240a.bundle.js:1
(anonymous) @ vendor.39a603ecde577a7c240a.bundle.js:1
e._moduleDoBootstrap @ vendor.39a603ecde577a7c240a.bundle.js:1
(anonymous) @ vendor.39a603ecde577a7c240a.bundle.js:1
t.invoke @ polyfills.17d8f276e039b1192a7e.bundle.js:1
onInvoke @ vendor.39a603ecde577a7c240a.bundle.js:1
t.invoke @ polyfills.17d8f276e039b1192a7e.bundle.js:1
r.run @ polyfills.17d8f276e039b1192a7e.bundle.js:1
(anonymous) @ polyfills.17d8f276e039b1192a7e.bundle.js:1
t.invokeTask @ polyfills.17d8f276e039b1192a7e.bundle.js:1
onInvokeTask @ vendor.39a603ecde577a7c240a.bundle.js:1
t.invokeTask @ polyfills.17d8f276e039b1192a7e.bundle.js:1
r.runTask @ polyfills.17d8f276e039b1192a7e.bundle.js:1
o @ polyfills.17d8f276e039b1192a7e.bundle.js:1
Promise resolved (async)
r @ polyfills.17d8f276e039b1192a7e.bundle.js:1
t.scheduleTask @ polyfills.17d8f276e039b1192a7e.bundle.js:1
onScheduleTask @ polyfills.17d8f276e039b1192a7e.bundle.js:1
t.scheduleTask @ polyfills.17d8f276e039b1192a7e.bundle.js:1
r.scheduleTask @ polyfills.17d8f276e039b1192a7e.bundle.js:1
r.scheduleMicroTask @ polyfills.17d8f276e039b1192a7e.bundle.js:1
f @ polyfills.17d8f276e039b1192a7e.bundle.js:1
t.then @ polyfills.17d8f276e039b1192a7e.bundle.js:1
BkNc.t.appInitializer @ vendor.39a603ecde577a7c240a.bundle.js:1
t.runInitializers @ vendor.39a603ecde577a7c240a.bundle.js:1
(anonymous) @ vendor.39a603ecde577a7c240a.bundle.js:1
pt @ vendor.39a603ecde577a7c240a.bundle.js:1
(anonymous) @ vendor.39a603ecde577a7c240a.bundle.js:1
t.invoke @ polyfills.17d8f276e039b1192a7e.bundle.js:1
onInvoke @ vendor.39a603ecde577a7c240a.bundle.js:1
t.invoke @ polyfills.17d8f276e039b1192a7e.bundle.js:1
r.run @ polyfills.17d8f276e039b1192a7e.bundle.js:1
t.run @ vendor.39a603ecde577a7c240a.bundle.js:1
e._bootstrapModuleFactoryWithZone @ vendor.39a603ecde577a7c240a.bundle.js:1
e.bootstrapModuleFactory @ vendor.39a603ecde577a7c240a.bundle.js:1
cDNt @ main.fc216b03541b1a27e00a.bundle.js:1
n @ inline.0dd42af0983ac61521a4.bundle.js:1
0 @ main.fc216b03541b1a27e00a.bundle.js:1
n @ inline.0dd42af0983ac61521a4.bundle.js:1
window.webpackJsonp @ inline.0dd42af0983ac61521a4.bundle.js:1
(anonymous) @ main.fc216b03541b1a27e00a.bundle.js:1