angular: BrowserAnimationsModule not available via barrel / public api

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

I’m using SystemJS and https://github.com/mgechev/angular-seed and I can’t import BrowserAnimationsModule.

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

Error:

VM686:2 GET http://localhost:5555/node_modules/@angular/platform-browser/typings/animations.js 404 (Not Found)
(anonymous) @ VM686:2
scheduleTask @ zone.js?1488980193959:1960
ZoneDelegate.scheduleTask @ zone.js?1488980193959:349
Zone.scheduleTask @ zone.js?1488980193959:192
Zone.scheduleMacroTask @ zone.js?1488980193959:206
(anonymous) @ zone.js?1488980193959:1984
send @ VM712:3
fetchTextFromURL @ system.src.js?1488980193958:1052
(anonymous) @ system.src.js?1488980193958:1788
ZoneAwarePromise @ zone.js?1488980193959:695
(anonymous) @ system.src.js?1488980193958:1787
(anonymous) @ system.src.js?1488980193958:2812
(anonymous) @ system.src.js?1488980193958:3390
(anonymous) @ system.src.js?1488980193958:3722
(anonymous) @ system.src.js?1488980193958:4114
(anonymous) @ system.src.js?1488980193958:4579
(anonymous) @ system.src.js?1488980193958:4848
(anonymous) @ system.src.js?1488980193958:408
ZoneDelegate.invoke @ zone.js?1488980193959:330
Zone.run @ zone.js?1488980193959:126
(anonymous) @ zone.js?1488980193959:679
ZoneDelegate.invokeTask @ zone.js?1488980193959:363
Zone.runTask @ zone.js?1488980193959:166
drainMicroTaskQueue @ zone.js?1488980193959:529
ZoneTask.invoke @ zone.js?1488980193959:420
(index):246 (SystemJS) XHR error (404 Not Found) loading http://localhost:5555/node_modules/@angular/platform-browser/typings/animations.js
	Error: XHR error (404 Not Found) loading http://localhost:5555/node_modules/@angular/platform-browser/typings/animations.js
	    at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:5555/node_modules/zone.js/dist/zone.js?1488980193959:1190:29) [<root>]
	    at Zone.runTask (http://localhost:5555/node_modules/zone.js/dist/zone.js?1488980193959:166:47) [<root> => <root>]
	    at XMLHttpRequest.ZoneTask.invoke (http://localhost:5555/node_modules/zone.js/dist/zone.js?1488980193959:416:38) [<root>]
	Error loading http://localhost:5555/node_modules/@angular/platform-browser/typings/animations.js as "@angular/platform-browser/typings/animations" from http://localhost:5555/app/app.module.js Not expecting this error? Report it at https://github.com/mgechev/angular2-seed/issues
(anonymous) @ (index):246
ZoneDelegate.invoke @ zone.js?1488980193959:330
Zone.run @ zone.js?1488980193959:126
(anonymous) @ zone.js?1488980193959:679
ZoneDelegate.invokeTask @ zone.js?1488980193959:363
Zone.runTask @ zone.js?1488980193959:166
drainMicroTaskQueue @ zone.js?1488980193959:529
ZoneTask.invoke @ zone.js?1488980193959:420

Expected behavior The import should be: import { BrowserAnimationsModule } from '@angular/platform-browser';

What is the motivation / use case for changing the behavior? Can’t use animations after upgrading to Angular 4 rc2

Angular version: 4.0.0-rc.2
Browser: Chrome
Language: TypeScript 2.1

About this issue

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

Links to this issue

angular - 'Found the synthetic property @panelState. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.' - Stack Overflow

Most upvoted comments

I added below to map and its working now:

var 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'
    };

I also have the below import in AppModule

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

+31

naveedahmed1 on Mar 21, 2017

Can you please also guide what settings are required for systemjs config file when using

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

naveedahmed1 on Mar 19, 2017

Hi guys, did anyone get ng4 to work with lazy loading and animation? I loaded BrowserAnimationsModule in my app-modules.ts and animation works fine in main module, but not in lazy loaded modules, so I tried to load BrowserAnimationsModule in my shared module as I get an error of : Unhandled Promise rejection: BrowserModule has already been loaded. If you need access to common directives any ideas? as I could not find anything on the web

born2net on Mar 29, 2017

@yakhiramesh090 : you might getting this error if you would be importing module something like this

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

Make sure it is imported as

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

freakanks on Oct 15, 2017

Even after @naveedahmed1’s solution, I get a strange 404 on :

http://192.168.1.107/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/animations

This /animations after umd.js bothers me.

d-damien on May 3, 2017

Thx! Now the animations of angular material work. I had to add the following configuration to the project config:


    this.SYSTEM_CONFIG_DEV.paths['@angular/animations'] = 'node_modules/@angular/animations/bundles/animations.umd.js';
    this.SYSTEM_BUILDER_CONFIG.packages['@angular/animations'] = {main: 'bundles/animations.umd.js', defaultExtension: 'js'};
    this.SYSTEM_CONFIG_DEV.paths['@angular/platform-browser/animations'] =
      'node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js';
    this.SYSTEM_CONFIG_DEV.paths['@angular/platform-browser/animations/testing'] =
      'node_modules/@angular/platform-browser/bundles/platform-browser-animations-testing.umd.js';
    this.SYSTEM_BUILDER_CONFIG.packages['@angular/platform-browser/animations'] = {
      main: 'bundles/platform-browser-animations.umd.js', defaultExtension: 'js'};

We have two animations. One rotates an md-icon. This one works. The other one, which animates the size of a div, does not work after the upgrade.

karlhaas on Mar 8, 2017

Sorry, the import is @angular/platform-browser/animations See https://github.com/angular/angular/blob/master/CHANGELOG.md#installing-rc1

DzmitryShylovich on Mar 8, 2017