Animation ionic

Ionic Framework ionic-v3
1

Hi all i tried migrating to ionic 3 but I encounter some problems with the browseranimation module
it seems to compile fine but I get a black screen and the following as an error in the console :

core.es5.js:1085 ERROR Error: Uncaught (in promise): Error: Found the synthetic property @movestart. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. Error: Found the synthetic property @movestart. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. at g (polyfills.js:3) at checkNoSyntheticProp (platform-browser.es5.js:2945) at DefaultDomRenderer2.setProperty (platform-browser.es5.js:2913) at setElementProperty (core.es5.js:9586) at checkAndUpdateElementValue (core.es5.js:9505) at checkAndUpdateElementInline (core.es5.js:9439) at checkAndUpdateNodeInline (core.es5.js:12130) at checkAndUpdateNode (core.es5.js:12105) at prodCheckAndUpdateNode (core.es5.js:12558) at Object.eval [as updateRenderer] (VideoIntroPage.ngfactory.js:993) at Object.updateRenderer (core.es5.js:12475) at checkAndUpdateView (core.es5.js:12077) at callViewAction (core.es5.js:12387) at execComponentViewsAction (core.es5.js:12333) at Object.checkAndUpdateView (core.es5.js:12078) at g (polyfills.js:3) at checkNoSyntheticProp (platform-browser.es5.js:2945) at DefaultDomRenderer2.setProperty (platform-browser.es5.js:2913) at setElementProperty (core.es5.js:9586) at checkAndUpdateElementValue (core.es5.js:9505) at checkAndUpdateElementInline (core.es5.js:9439) at checkAndUpdateNodeInline (core.es5.js:12130) at checkAndUpdateNode (core.es5.js:12105) at prodCheckAndUpdateNode (core.es5.js:12558) at Object.eval [as updateRenderer] (VideoIntroPage.ngfactory.js:993) at Object.updateRenderer (core.es5.js:12475) at checkAndUpdateView (core.es5.js:12077) at callViewAction (core.es5.js:12387) at execComponentViewsAction (core.es5.js:12333) at Object.checkAndUpdateView (core.es5.js:12078) at g (polyfills.js:3) at l (polyfills.js:3) at polyfills.js:3 at t.invokeTask (polyfills.js:3) at Object.onInvokeTask (core.es5.js:4136) at t.invokeTask (polyfills.js:3) at n.runTask (polyfills.js:3) at a (polyfills.js:3)

and when i try to import the BrowserAnimationsModule I get compile errors :

`webpack update started 

[23:50:29] typescript: 
id/node_modules/@angular/platform-browser/animations/src/animation_renderer.d.ts, line: 1
Cannot find module ‘@angular/animations/browser’.

[23:50:29] typescript: 
vote-hybrid/node_modules/@angular/platform-browser/animations/src/providers.d.ts, line: 8 L1:
import { É”AnimationEngine as AnimationEngine } from ‘@angular/animations/browser’;
L2: import { NgZone, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2 } from ‘@angular/core’;

        Cannot find module '@angular/animations/browser'.

   L8:  export declare function instantiateSupportedAnimationDriver(): NoopAnimationDriver;                             
   L9:  export declare function instantiateDefaultStyleNormalizer(): WebAnimationsStyleNormalizer;

`

any suggestions ?

thanks in advance :slight_smile:

2

Yeah: I would suggest installing @angular/animations.

1 Like
3

ok that was super fast and easy fix :slight_smile:
thaks @rapropos I just thought that they moved the animation in
the browser module and it was not needed any more :confused:

4

i get this error
Uncaught (in promise): Error: Found the synthetic property @contentVisibility. Please include either “BrowserAnimationsModule” or “NoopAnimationsModule” in your application. Error: Found the synthetic property @contentVisibility. Please include either “BrowserAnimationsModule” or “NoopAnimationsModule” in your application. at g

can you help ?

5

Did you read the rest of the thread? The solution is already marked above.

6

Hi:

I think you can do the following:

  1. Download and use https://daneden.github.io/animate.css/ in your “src/index.html” page
    ( )

  2. In any html page
add the following in the ion-content

ion-content class=“animated bounceInLeft”

I guess it should give you the page animation feel.

Cheers.

8

That solution did not work for me either. I am still trying to figure it out. If anyone else has any other ideas I would love to hear them. Thanks.

9

If it didn’t, then you don’t have the same problem as OP, so this thread isn’t going to address your situation.

10

Make sure you’re importing BrowserAnimationModule like this:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'

Also, I had to roll @angular/animations back to 4.1.3 to get things to work. See this issue on Github.