Con la nueva versión de Angular-Material, debe agregar un módulo para Angular-Animations. Puede elegir entre dos BrowserAnimationsModule y NoopAnimationsModule. La guía oficial dice:
Algunos componentes de Material dependen del módulo de animaciones angulares para poder realizar transiciones más avanzadas. Si desea que estas animaciones funcionen en su aplicación, debe instalar el módulo @angular/animations e incluir BrowserAnimationsModule en su aplicación.
npm install --save @angular/animations import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; @NgModule({ ... imports: [BrowserAnimationsModule], ... }) export class PizzaPartyAppModule { }Si no desea agregar otra dependencia a su proyecto, puede usar NoopAnimationsModule.
import {NoopAnimationsModule} from '@angular/platform-browser/animations'; @NgModule({ ... imports: [NoopAnimationsModule], ... }) export class PizzaPartyAppModule { }
No entiendo muy bien cuál es la diferencia aquí. Parece ser exactamente lo mismo :) ¿Cuál es la diferencia entre los dos módulos?
Como dice el nombre noop ("sin operación"), ese módulo no hace nada. Es un módulo de utilidad que se burla del módulo de animación real, pero en realidad no anima.
Esto puede ser útil en plataformas donde la animación sería demasiado lenta, o para pruebas (unidad, integración, e2e con Cypress, Transportador, ...), si la animación no está involucrada en lo que realmente desea probar.
@NgModule({ imports: [ BrowserModule, environment.production ? BrowserAnimationsModule : NoopAnimationsModule, ... ] ... } export class AppModule {}BROWSER_ANIMATIONS_PROVIDERS se usa para aplicaciones reales
Separe los proveedores del módulo real para que podamos hacer una modificación local en Google3 para incluirlos en BrowserModule.
BROWSER_NOOP_ANIMATIONS_PROVIDERS se usa para probar
Separe los proveedores del módulo real para que podamos hacer una modificación local en Google3 para incluirlos en BrowserTestingModule.