'Encontré la propiedad sintética @panelState. Incluya "BrowserAnimationsModule" o "NoopAnimationsModule" en su aplicación. '

Actualicé un proyecto Angular 4 usando angular-seed y ahora obtengo el error

Encontramos la propiedad sintética @panelState. Incluya "BrowserAnimationsModule" o "NoopAnimationsModule" en su aplicación.

¿Cómo puedo arreglar esto? ¿Qué me dice exactamente el mensaje de error?

Asegúrese de que el @angular/animationspaquete esté instalado (por ejemplo, ejecutando npm install @angular/animations). Luego, en tu app.module.ts

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

@NgModule({
  ...,
  imports: [
    ...,
    BrowserAnimationsModule
  ],
  ...
})

Este mensaje de error a menudo es engañoso .

Es posible que haya olvidado importar el BrowserAnimationsModule. Pero ese no fue mi problema . Estaba importando BrowserAnimationsModuleen la raíz AppModule, como todos deberían hacer.

El problema era algo completamente ajeno al módulo. Estaba animando un *ngIfen la plantilla del componente pero había olvidado mencionarlo en la @Component.animations clase para el componente .

@Component({
  selector: '...',
  templateUrl: './...',
  animations: [myNgIfAnimation] // <-- Don't forget!
})

Si usa una animación en una plantilla, también debe incluir esa animación en los animationsmetadatos del componente ... cada vez .

Me encontré con problemas similares cuando intenté usar el BrowserAnimationsModule. Los siguientes pasos resolvieron mi problema:

1. Eliminar el directorio node_modules
2. Borre la caché de su paquete usando npm cache clean
3. Ejecute uno de estos dos comandos enumerados aquí para actualizar sus paquetes existentes

Si experimenta un error 404 como

http://.../node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/animations

agregue las siguientes entradas mapen su system.config.js :

'@angular/animations': 'node_modules/@angular/animations/bundles/animations.umd.min.js',
'@angular/animations/browser':'node_modules/@angular/animations/bundles/animations-browser.umd.js',
'@angular/platform-browser/animations': 'node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.js'

naveedahmed1 proporcionó la solución a este problema de github .

Todo lo que tenía que hacer era instalar esto

npm install @angular/animations@latest --save  

y luego importar

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

en tu app.module.tsarchivo.

Para mí, me perdí esta declaración en el decorador @Component: animaciones: [yourAnimation]

Una vez que agregué esta declaración, los errores desaparecieron. (Angular 6.x)

Mi problema fue que mi @ angular / platform-browser estaba en la versión 2.3.1

npm install @angular/platform-browser@latest --save

La actualización a 4.4.6 hizo el truco y agregó la carpeta / animaciones en node_modules / @ angular / platform-browser

Después de instalar un módulo de animación, crea un archivo de animación dentro de la carpeta de la aplicación.

router.animation.ts

import { animate, state, style, transition, trigger } from '@angular/animations';
    export function routerTransition() {
        return slideToTop();
    }

    export function slideToRight() {
        return trigger('routerTransition', [
            state('void', style({})),
            state('*', style({})),
            transition(':enter', [
                style({ transform: 'translateX(-100%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
            ]),
            transition(':leave', [
                style({ transform: 'translateX(0%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(100%)' }))
            ])
        ]);
    }

    export function slideToLeft() {
        return trigger('routerTransition', [
            state('void', style({})),
            state('*', style({})),
            transition(':enter', [
                style({ transform: 'translateX(100%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
            ]),
            transition(':leave', [
                style({ transform: 'translateX(0%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))
            ])
        ]);
    }

    export function slideToBottom() {
        return trigger('routerTransition', [
            state('void', style({})),
            state('*', style({})),
            transition(':enter', [
                style({ transform: 'translateY(-100%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateY(0%)' }))
            ]),
            transition(':leave', [
                style({ transform: 'translateY(0%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateY(100%)' }))
            ])
        ]);
    }

    export function slideToTop() {
        return trigger('routerTransition', [
            state('void', style({})),
            state('*', style({})),
            transition(':enter', [
                style({ transform: 'translateY(100%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateY(0%)' }))
            ]),
            transition(':leave', [
                style({ transform: 'translateY(0%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateY(-100%)' }))
            ])
        ]);
    }

Luego importa este archivo de animación a cualquier componente.

En su archivo component.ts

import { routerTransition } from '../../router.animations';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
  animations: [routerTransition()]
})

No olvides importar animación en tu app.module.ts

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

La animación debe aplicarse en el componente específico.

EJ: Uso de la directiva de animación en otro componente y proporcionada en otro.

CompA --- @Component ({

animaciones: [animación]}) CompA --- @Component ({

animaciones: [animación] <=== esto debe proporcionarse en el componente utilizado})

Para mí fue porque puse el nombre de la animación entre corchetes.

<div [@animation]></div>

Pero después de quitar el soporte todo funcionó bien (en Angular 9.0.1):

<div @animation></div>

Obtuve el siguiente error:

Found the synthetic property @collapse. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

Sigo la respuesta aceptada por Ploppy y resolvió mi problema.

Aquí están los pasos:

1.
    import { trigger, state, style, transition, animate } from '@angular/animations';
    Or 
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

2. Define the same in the import array in the root module.

Resolverá el error. Feliz codificación !!

Prueba esto

npm install @ angular / animations @ latest --save

importar {BrowserAnimationsModule} desde '@ angular / platform-browser / animations';

esto funciona para mi

Simplemente agregue ... importe {BrowserAnimationsModule} desde '@ angular / platform-browser / animations';

importaciones: [.. BrowserAnimationsModule

],

en el archivo app.module.ts.

asegúrese de haber instalado .. npm install @ angular / animations @ latest --save

Actualización para angularJS 4:

Error: (SystemJS) Error XHR (404 no encontrado) al cargar http: // localhost: 3000/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/animations

Solución:

**cli:** (command/terminal)
npm install @angular/animations@latest --save

**systemjs.config.js** (edit file)
'@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',

**app.module.ts** (edit file)
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@NgModule({
  imports:      [ BrowserModule,BrowserAnimationsModule ],
...

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

@NgModule({
  declarations: [   --   ],
  imports: [BrowserAnimationsModule],
  providers: [],
  bootstrap: []
})