Solvedangular 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

21 Answers

✔️Accepted Answer

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

Other Answers:

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

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

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

More Issues: