angular - ejemplos - ''Encontré la propiedad sintética @panelState. Incluya "BrowserAnimationsModule" o "NoopAnimationsModule" en su aplicación. ''
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 ],
...
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
],
...
})
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'';
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
.
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})
Me encontré con problemas similares, cuando traté de usar el
BrowserAnimationsModule
.
Los siguientes pasos resolvieron mi problema:
- Eliminar el directorio node_modules
-
Borre la caché de su paquete usando
npm cache clean - 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 .
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
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 !!
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)
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
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
.
en tu cmd favorito
npm install @ angular / animations @ latest --save
buena suerte
--
import { BrowserAnimationsModule } from ''@angular/platform-browser/animations'';
---
@NgModule({
declarations: [ -- ],
imports: [BrowserAnimationsModule],
providers: [],
bootstrap: []
})