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

angular wikipedia

Question

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?

Answer 1

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 ],
...

Answer 2

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

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

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

Answer 3

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'';

Answer 4

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 BrowserAnimationsModule en el AppModule raíz, como todos deberían hacer.

El problema era algo completamente ajeno al módulo. Estaba animando un *ngIf en la plantilla del componente, pero me había olvidado de mencionarlo en @Component.animations para la clase de 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 metadatos de las animations del componente ... cada vez .

Answer 5

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 se debe proporcionar en el componente utilizado})

Answer 6

Me encontré con problemas similares, cuando traté de 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 here 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 al map en 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 .

Answer 7

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

Answer 8

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 !!

Answer 9

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)

Answer 10

Prueba esto

npm install @ angular / animations @ latest --save

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

esto funciona para mi

Answer 11

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

Answer 12

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 su archivo app.module.ts .

Answer 13

en tu cmd favorito

npm install @ angular / animations @ latest --save

buena suerte

Answer 14

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

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