angular: 4.0.0-Rc.1 AnimationsModule not found / exported in @angular/animations

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

Followed changelog instructions to upgrade to 4.0.0-rc.1 with the extra step of including the new animations package.

If you rely on Animations you’ll also need to install the animations package and import the new AnimationsModule from @angular/animations in your root NgModule. Without this, your code will compile and run, but animations won’t activate.

Typescript and ng serve (cli beta32.3) both complain of AnimationsModule not found (after npm install). Looking at the node_modules folder (and also master src) for animations there is no exported AnimationsModule declared.

Is this a case of incorrect animations package or changelog instructions? (ie looking through the source I found refs to BrowserAnimationsModule in platform-browser but I’m yet to try this out)

Expected behavior

Expect to follow changelog instructions and have it work.

Minimal reproduction of the problem with instructions

ng create new (cli beta32.3) Create simple component with an animation Follow changelog instructions for 4.0.0.rc1 with animations ng serve

(compile err with import { AnimationsModule } from '@angular/animations' etc) (Remove animations import etc and app will compile and run, but without animations)

What is the motivation / use case for changing the behavior?

Want animations to work with latest rc

Please tell us about your environment:

Angular version: 4.0.0-rc.1

Browser: all

Language: Typescript 2.2.1
Node (for AoT issues): node --version =

About this issue

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

Commits related to this issue

docs: fix animations module in the changelog Closes #14728 — committed to DzmitryShylovich/angular by DzmitryShylovich 7 years ago
changelog: fix animations module Closes #14728 — committed to DzmitryShylovich/angular by DzmitryShylovich 7 years ago
docs(changelog): fix animations module Closes #14728 — committed to DzmitryShylovich/angular by DzmitryShylovich 7 years ago
docs: fix animations module instructions in the changelog (#14729) Closes #14728 — committed to angular/angular by DzmitryShylovich 7 years ago
docs: fix animations module instructions in the changelog (#14729) Closes #14728 — committed to asnowwolf/angular by DzmitryShylovich 7 years ago
docs: fix animations module instructions in the changelog (#14729) Closes #14728 — committed to juleskremer/angular by DzmitryShylovich 7 years ago

Most upvoted comments

@Delagen you are right, I have added below to the systemjs config and its working now:

map = {
'@angular/animations': 'node_modules/@angular/animations/bundles/animations.umd.min.js',
        '@angular/animations/browser':'node_modules/@angular/animations/bundles/animations-browser.umd.js',
        '@angular/platform-browser/animations': 'node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js'
}

naveedahmed1 on Mar 21, 2017

Looks like there’s an error in the changelog and you need

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

DzmitryShylovich on Feb 25, 2017

@DzmitryShylovich Yes all good now, thanks. I see you submitted a PR to update the changelog too, awesome. One quick note: could probably also add: import { trigger, state, style, transition, animate } from '@angular/animations'; instead of @angular/core, but I think both work for now. I assume Angular will deprecate this at some point.

Note: I also had another issue with (some) animations not working in 4.0.0-rc.1, but issue was related to a different bug here #14732 and easily fixed.

@Delagen Yes, I just found that happens only with AoT (i.e ng build --prod) but not ng serve. Know of a workaround yet?

dharders on Feb 25, 2017

@crumhorn can you please confirm if the systemjs config you mentioned here https://github.com/angular/angular/issues/14728#issuecomment-282710030 works with Angular 4 RC 5 (for me its not working and showing Error “/node_modules/@angular/animations/browser/ 403 (Forbidden)” in console)?

Edit: The below settings are working for me.

map = {
'@angular/animations': 'node_modules/@angular/animations/bundles/animations.umd.min.js',
        '@angular/animations/browser':'node_modules/@angular/animations/bundles/animations-browser.umd.js',
        '@angular/platform-browser/animations': 'node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js'
}

naveedahmed1 on Mar 19, 2017

Kept having errors until using @naveedahmed1 solution

Thank you so much!

mster on Jun 9, 2017

@naveedahmed1

This is 100% if you are trying to use angular 4.1! Thanks!

egonallison on May 29, 2017

@naveedahmed1 RC.4 introduce new submodule @angular/animations/browser so it must be added to config

Delagen on Mar 20, 2017