'Encontrou a propriedade sintética @panelState. Inclua "BrowserAnimationsModule" ou "NoopAnimationsModule" em seu aplicativo. '

Atualizei um projeto Angular 4 usando angular-seed e agora recebo o erro

Encontrada a propriedade sintética @panelState. Inclua "BrowserAnimationsModule" ou "NoopAnimationsModule" em seu aplicativo.

Como posso consertar isso? O que exatamente a mensagem de erro está me dizendo?

Verifique se o @angular/animationspacote está instalado (por exemplo, executando npm install @angular/animations). Em seguida, no seu app.module.ts

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

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

Essa mensagem de erro geralmente é enganosa .

Você pode ter esquecido de importar o arquivo BrowserAnimationsModule. Mas esse não era meu problema . Eu estava importando BrowserAnimationsModulena raiz AppModule, como todos deveriam fazer.

O problema era algo completamente não relacionado ao módulo. Eu estava animando um *ngIfno modelo de componente, mas havia esquecido de mencioná-lo na @Component.animations classe for do componente .

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

Se você usar uma animação em um modelo, também deverá listá-la nos animationsmetadados do componente ... sempre .

Corri para problemas semelhantes, quando tentei usar o BrowserAnimationsModule. As etapas a seguir resolveram meu problema:

1. Exclua o diretório node_modules
2. Limpe o cache do pacote usando npm cache clean
3. Execute um desses dois comandos listados aqui para atualizar seus pacotes existentes

Se você encontrar erros 404, como

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

adicione as seguintes entradas mapno seu 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 forneceu a solução para esta questão do github .

Tudo o que eu precisava fazer era instalar este

npm install @angular/animations@latest --save  

e depois importe

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

no seu app.module.tsarquivo.

Para mim, eu perdi esta declaração no decorador de componentes: animações: [yourAnimation]

Depois de adicionar esta declaração, os erros desapareceram. (Angular 6.x)

Meu problema era que meu navegador @ angular / platform estava na versão 2.3.1

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

A atualização para 4.4.6 fez o truque e a pasta adicionou / animações em node_modules / @ angular / platform-browser

Depois de instalar um módulo de animação, você cria um arquivo de animação dentro da pasta do aplicativo.

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%)' }))
            ])
        ]);
    }

Então você importa esse arquivo de animação para qualquer componente.

No seu arquivo component.ts

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

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

Não se esqueça de importar a animação no seu app.module.ts

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

A animação deve ser aplicada no componente específico.

EX: Usando a diretiva de animação em outro componente e fornecida em outro.

CompA --- @Component ({

animações: [animação]}) CompA --- @Component ({

animações: [animação] <=== isso deve ser fornecido no componente usado})

Para mim foi porque coloquei o nome da animação entre colchetes.

<div [@animation]></div>

Mas depois que removi o suporte, tudo funcionou bem (no Angular 9.0.1):

<div @animation></div>

Eu fiquei abaixo do erro:

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

Sigo a resposta aceita pelo Ploppy e ele resolveu o meu problema.

Aqui estão os passos:

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.

Isso resolverá o erro. Feliz codificação !!

Tente isto

npm install @ angular / animações @ mais recentes --save

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

isso funciona para mim.

Basta adicionar .. import {BrowserAnimationsModule} de '@ angular / platform-browser / animations';

importações: [.. BrowserAnimationsModule

],

no arquivo app.module.ts.

verifique se você instalou .. npm install @ angular / animations @ latest --save

Atualização para angularJS 4:

Erro: erro XHR (SystemJS) (404 não encontrado) ao carregar http: // localhost: 3000/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/animations

Solução:

**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: []
})