Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's the difference between BrowserAnimationsModule and NoopAnimationsModule?

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?

like image 226
OddDev Avatar asked Apr 12 '17 07:04

OddDev


People also ask

What is NoopAnimationsModule?

NoopAnimationsModulelinkA null player that must be imported to allow disabling of animations.

What is BrowserAnimationsModule?

BrowserAnimationsModulelinkExports BrowserModule with additional dependency-injection providers for use with animations.

What is BrowserModule in angular?

BrowserModule provides services that are essential to launch and run a browser application. BrowserModule also re-exports CommonModule from @angular/common , which means that components in the AppModule also have access to the Angular directives every application needs, such as NgIf and NgFor .


1 Answers

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 {} 
like image 177
Günter Zöchbauer Avatar answered Sep 28 '22 07:09

Günter Zöchbauer