Need BrowserAnimationsModule in Angular but gives error in Universal

by

Edit: this solution doesn’t appear to work as of version 6.1. I’ll leave the below solution in case it works again someday and update if I find another solution.

Original answer:

I was having this exact same problem. Full credit goes to this fork on github from pquarme.

What you need to do is:

1) Remove any reference to BrowserAnimationsModule from app.module.ts and create a separate app.browser.module.ts file which contains:

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

import { AppModule} from './app.module';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    AppModule
  ],
  bootstrap: [AppComponent]
})
export class AppBrowserModule { }

Basically your app.module.ts file will now be platform agnostic. Then, you’ll have separate files for your app, your browser environment and your server environment.

2) Import NoopAnimationsModule to your app.server.module.ts so you don’t throw errors in Node.

3) Modify your main.ts file to bootstrap AppBrowserModule instead of AppModule

After about 2 hours of searching, this was the only solution that worked for me.

More Related Contents:

  1. Update to Angular v6 – Module not found: Error: Can’t resolve ‘fs’
  2. Implementing a plugin architecture / plugin system / pluggable framework in Angular 2, 4, 5, 6
  3. Angular 2 – how round calculated number?
  4. Angular/RxJS When should I unsubscribe from `Subscription`
  5. Is it necessary to unsubscribe from observables created by Http methods?
  6. Dynamically add event listener
  7. What is the equivalent of ngShow and ngHide in Angular 2+?
  8. How to iterate object keys using *ngFor
  9. Angular error: “Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input'”
  10. How to use `trackBy` with `ngFor`
  11. How to write unit testing for Angular / TypeScript for private methods with Jasmine
  12. Angular and Typescript: Can’t find names – Error: cannot find name
  13. Angular 2 Scroll to top on Route Change
  14. Getting “Uncaught (in promise): TypeError: Object(…) is not a function” Error from Ionic-native VideoEditor Plugin
  15. Typescript/Angular/ES6: can I finally let `hasOwnProperty()` die in for loops?
  16. Angular 2 ‘component’ is not a known element
  17. How to make a sequence of http requests in Angular 6 using RxJS
  18. Function DocumentReference.set() called with invalid data. Unsupported field value: a custom Budget object
  19. Angular 5 Reactive Forms – Radio Button Group
  20. MongoError: user is not allowed to do action
  21. Use OpenLayers 4 with Angular 5
  22. Subscribing to a nested Observable
  23. Angular 2 translation change language in application
  24. Open/Close sidenav from another component
  25. Angular – How to fix ‘property does not exist on type’ error?
  26. Clear browser cache in Angular
  27. Angular 5 to 6 Upgrade: Property ‘map’ does not exist on type Observable
  28. Adding / Removing components on the fly
  29. FormControl.detectchanges – why use distinctUntilChanged?
  30. How to use angular2 built-in date pipe in services and directives script files [duplicate]

Leave a Comment