What's the difference between BrowserAnimationsModule and NoopAnimationsModule?

AngularAngular MaterialAngular Animations

Angular Problem Overview

With the new Angular-Material release, you need to add a module for Angular-Animations. You can choose between two BrowserAnimationsModule and NoopAnimationsModule. The official guide states:

> Some Material components depend on the Angular animations module in > order to be able to do more advanced transitions. If you want these > animations to work in your app, you have to install the > @angular/animations module and include the BrowserAnimationsModule in > your app. > > npm install --save @angular/animations > import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; >
> @NgModule({ > ... > imports: [BrowserAnimationsModule], > ... > }) > export class PizzaPartyAppModule { } > If you don't want to add another dependency to your project, you can use the NoopAnimationsModule. >
> import {NoopAnimationsModule} from '@angular/platform-browser/animations'; >
> @NgModule({ > ... > imports: [NoopAnimationsModule], > ... > }) > export class PizzaPartyAppModule { }

I don't quite get what is the difference here. Seems to be exactly the same :) What's the difference between the two modules?

Angular Solutions

Solution 1 - Angular

As the name noop ("no operation") says, that module doesn't do anything. It is a utility module that mocks the real animation module but doesn't actually animate.

This can be handy on platforms where animation would be too slow, or for testing (unit, integration, e2e with Cypress, Protractor, ...) , if animation isn't involved in what you actually want to test.

@NgModule({
  imports: [
    BrowserModule,
    environment.production ? BrowserAnimationsModule : NoopAnimationsModule,
    ...
   ]
   ...
}
export class AppModule {}

Solution 2 - Angular

BROWSER_ANIMATIONS_PROVIDERS is used for real application

> Separate providers from the actual module so that we can do a local > modification in Google3 to include them in the BrowserModule.

BROWSER_NOOP_ANIMATIONS_PROVIDERS is used for testing

> Separate providers from the actual module so that we can do a local > modification in Google3 to include them in the BrowserTestingModule.

Categories
Recommended Angular Solutions
Recommended Angular Material Solutions
Recommended Angular Animations Solutions

Previous Solution:

Removing all fraction symbols like “¼” and “½” from a string

JavaReplaceall

Next Solution:

Is it possible to force fail a recaptcha v2 for testing purposes? (I.e. pretend to be a robot)

Recaptcha

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionOddDevView Question on Stackoverflow
Solution 1 - AngularGünter ZöchbauerView Answer on Stackoverflow
Solution 2 - AngularyurzuiView Answer on Stackoverflow