Cannot find name AnimationModule

Hi, I have update my project to angular 4.0.0

 Cordova CLI: 6.5.0 
 Ionic Framework Version: 3.0.0-beta.2
 Ionic CLI Version: 2.2.1
 Ionic App Lib Version: 2.2.0
 Ionic App Scripts Version: 1.2.2
 ios-deploy version: 1.9.1 
 ios-sim version: 5.0.13 
 OS: macOS Sierra
 Node Version: v7.2.1
 Xcode version: Xcode 8.0 Build version 8S201h

I have animations at a page , at first it produced error asking to add BrowserAnimationsModule since in angular 4 they have pulled it out from @angular/core

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

  import { Component, ViewChild, ElementRef ,trigger, state, style, animate, transition } from '@angular/core';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { IonicPage, NavController, NavParams, Content} from 'ionic-angular';

and now it produces error Cannot find name 'AnimationEngine'.

any suggestions ?!

Found a solution? I ran into the same problem :frowning:

I would try installing @angular/animations.

… and do your animation related imports from that library, not from ‘core’ anymore:

import { trigger, state, style, transition, animate } from '@angular/animations'

,see Angular 4.0.0 release docs.

Exactly, there is a new animation package, to update to v4.0.0 you need:

I. install @angular/animations:

npm install @angular/animations@4.0.0 --save

II. In app.module.ts:

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

and

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpModule,
...
  ],

III. Change declarations at the page:

import { trigger, state, style, transition, animate, AUTO_STYLE } from '@angular/animations'

4 Likes

what is that AUTO_STYLE import for? I have never seen it.

I too am attempting to get Angular 4 animations working, i have installed @angular/animations and correctly imported the browserAnimationsModule from @angular/platform-browser/animations

but animations are still not working.

Thanks for the details. I would just add that I believe (well presume, as none of this is obvious to me) that the number in

npm install @angular/animations@4.0.0 --save

should match the number of

"@angular/core": "4.1.0",

in package.json ( so in this case 4.1.0.)

1 Like

exactly, it should match @angular/core ver, @yasirpanjsheri forget about AUTO_STYLE - it’s a remnant of the old versions

Worked for me thanks