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';
NgModule({
  imports:      [
    BrowserAnimationsModule
  ]
})

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.

Advertisements