Error Importing BrowserAnimationsModule

Seems like migrating to Angular 4 throws errors for animation module, mainly 404 not found.

I have tried so many ways to fix it and looked all over google until I finally found the correct answer.

In systemsjs.config.js add the following map settings:

'@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js'

In app.module.js (or whatever your module is named) add the following:

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

Please not that some people mentioned that using BrowserModule and BrowserAnimationsModule will not work so you will need to replace one with the other. Please know this is incorrect and if BrowserModule is removed from your app.module.js you may get a lot of errors especially for ng properties.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s